• 0
JavaPorgrammer

تعلم كيف تبني موقع تجارة إليكتروني من الصفر..

سؤال

53 إجابة على هذا السؤال .

  • 0

تسجيل إعجاب كبير بشغلك يابوحميد ... وانتظر عودتي مع مجموعة الأسئلة بعد تمحيص الموضوع بتمعن أكثر ..!!!

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

ان شاء الله معك الى الاخر

شرح اكثر من رائع

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

شرح رائع يا ابو حميد ومنتظرين باقى الدرس

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

تم التثبيت ..

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

أشكر للإخوان تفاعلهم .. وشكرا على التثبيت ..

نأتي الآن إلى تصدير الـ Model إلى محرك قواعد البيانات..

من التبويب : Database -> تختار : forward Engineer

post-231827-050653400 1303813350_thumb.j

نحدد اول خيارين ..

post-231827-045364500 1303813533_thumb.j

نتابع ..

post-231827-065601000 1303813614_thumb.j

post-231827-044296800 1303813714_thumb.j

نكتب اسم المستخدم لقاعدة البيانات ..

post-231827-013667800 1303813815_thumb.j

كذا خلصنا :)

post-231827-014981500 1303814803_thumb.j

يمكنك التأكد من وجود قاعدة البيانات من خلال الـ console :


mysql> show databases;
+--------------------+
| Database |
+--------------------+
| information_schema |
| commerce |
| ebilling_db |
| mysql |
| test |
+--------------------+
5 rows in set (0.34 sec)

ممتاز !

الآن ننتقل إلى المرحلة التمهيدية لبناء الأكود ، نفتح محرر الأكواد .. Netbeans

انتقل إلى التبويب Services ، ومن ثم databases نقرة باليمين New Connection

post-231827-077239300 1303815859_thumb.j

ثم نكتب البيانات المطلوبة..

post-231827-029676600 1303815948_thumb.j

راح تنضاف إلى قواعد البيانات الموجودة .. في الصورة التالية قاعدة البيانات وجداولها:

post-231827-063313000 1303816014_thumb.j

انتهينا الآن من المرحلة الأولى .. :)

بالنسبة لمن لا يريد استخدام الأداة السابقة :workbench: ، أرفقت لك ملف الاستعلام .

sqlFile.sql

وأيضا أرفقت لكم الـ Model الخاص بقاعدة البيانات

Model.rar

انتظرونا في المرحلة الثانية.

تقبلوا تحياتي.

4

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

شكرا لك شرح اكثر من رائع

ارجو منك الاستمرار

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم ورحمة الله

الصحيح أخوي لا أقول إلا جزاك الله خير على ما قدمته من شرح مفيد جدا و الله يكثر من أمثالك

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

االدرس جكميل جدا والشرح طريقة الشرح مفيدة

براك الله فيك وجعلة في ميزان حسناتك

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

مشكور يا احمد على هذا الدرس الرائع

وفى انتظار استكماله

بالتوفيق دائما

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

أشكر الجميع على تفاعلهم ..

وعذرا على التأخر

نكمل الآن ما انتهينا عنده :sleep:

ننشئ مشروعا جديدا من خلال الايقونة

post-231827-035348600 1304172589_thumb.g

ونختار java web ومن القائمة اليمنى web application :

post-231827-058805500 1304172639_thumb.g

سميته : "ArabTeamMarket" بس ياشباب تراي المدير العام من الحين :P

post-231827-064153000 1304172714_thumb.g

نختار السيرفر

post-231827-003644100 1304172772_thumb.g

وبعدها انهاء :happy:

راح يفتح لك صفحة الـ index جميل جدا .. لاختبار السيرفر قم بنشر المشروع عن طريق : زر باليمين على اسم المشروع -> Run ، راح يشغل لك الصفحة على المتصفح ..

حلو!

ننشئ مجلد الصفحات المحمية : protect ، من خلال زر باليمين على اسم المشروع -> new -> مجلد جديد "new folder"

post-231827-054786800 1304176001_thumb.g

نضيف إليه "مبدأيا" الصفحات :

cart -checkout - confirm

الآن نهيئ الاستايل والـ header , footer ..

ملف الاستايل المستخدم في هذا الدرس : cleantype.zip

سنحتاج منه ملف الـ css والصور الموجودة فيه :cool:

ننسخ ملف default.css إلى المجلد الرئيس ، وننسخ مجلد Images كذلك ..

ننشئ مجلد تحت مجلد WEB-INF ونسميه includes ، نضيف إليه صفحات JSP :

header + footer ، ولكن لاحظ الصورة التالية :

post-231827-038488900 1304176822_thumb.g

جعلنا الصفحات صفحات جزئية :)

نمسح محتويات صفحة الهيدر ، وننسخ إليه السطور التالية :


<%-- any content can be specified here e.g.: --%>
<%@ page pageEncoding="windows-1256" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>:: Arab Team Market ::</title>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="#">Super Market</a></h1>
<h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
</div>
<!-- end div#logo -->
<div id="menu">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">categories</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">My Cart</a></li>
</ul>
</div>
<!-- end div#menu -->
</div>

ونفس القضية في صفحة الفوتر :


<%-- any content can be specified here e.g.: --%>
<%@ page pageEncoding="windows-1256" %>
<div id="footer">
<p id="legal">Copyright © 2007 Clean Type. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
<p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
</div>
</body>
</html>

الآن نضيف ملف web.xml إلى المشروع من خلال :

post-231827-090948100 1304177151_thumb.g

نروح للتبويب Pages ثم Add JSP property Group..

post-231827-063972200 1304177307_thumb.g

نحدد له المسار الذي ستوضع فيه محتويات الهيدر والفوتر ..

وفي مشروعنا سيكون:


/index.jsp
/protect/*

post-231827-012023700 1304177460_thumb.g

بعد ذلك نحدد له صفحة الهيدر وصفحة الفوتر .. لاحظ الصورة الآتية:

post-231827-096821500 1304177534_thumb.g

قم بلصق محتويات الـ index في جميع الصفحات :


<%--
Document : index
Created on : Apr 30, 2011, 1:46:07 PM
Author : Admin
--%>

<[email protected] contentType="text/html" pageEncoding="windows-1256"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="page-bgtop">
<div id="content">
<div class="post">
<h2 class="title"><a href="#">Lorem Ipsum Dolor Volutpat</a></h2>
<p class="byline">Posted by FreeCssTemplates</p>
<div class="entry">
<p><img src="images/img02.jpg" alt="" width="564" height="294" /></p>
<p>This is <strong>Clean Type</strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>, released for free under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a> license. The photo used in this template is from <a href="http://www.pdphoto.org">PDPhoto.org</a>. You're free to use this template for anything as long as you link back to <a href="http://www.freecsstemplates.org/">my site</a>. Enjoy :)</p>
</div>
<div class="meta">
<p class="links"><a href="#" class="comments">Comments (32)</a></p>
</div>
</div>
</div>
<!-- end div#content -->
<div id="sidebar">
<ul>
<li id="search">
<h2>Search</h2>
<form method="get" action="">
<fieldset>
<input type="text" id="seach-text" name="s" value="" />
<input type="submit" id="search-submit" value="Search" />
</fieldset>
</form>
</li>
<li>
<h2>Categories:</h2>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
</li>
<li>
<h2>Other Options:</h2>
<ul>
<li><a href="#">Nec metus sed donec</a></li>
<li><a href="#">Magna lacus bibendum mauris</a></li>
<li><a href="#">Velit semper nisi molestie</a></li>
<li><a href="#">Eget tempor eget nonummy</a></li>
<li><a href="#">Nec metus sed donec</a></li>
<li><a href="#">Magna lacus bibendum mauris</a></li>
<li><a href="#">Velit semper nisi molestie</a></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
</div>
<!-- end div#sidebar -->
<div style="clear: both; height: 1px"></div>
</div>


</div>
</body>
</html>

قم بنشر المشروع ، يفترض أن تكون النتيجة :

post-231827-029564800 1304177790_thumb.g

نكمل الدرس القادم بإذن الله .

:)

4

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

شكرا على كل المجهودا ت التي تبذلها حتى الآن كل شئ واضح

هل يوجد قوالب واجدة اخرى مثل هذه ومن اين نحصل عليها

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

حياك الله أخي ابن رستم ..

فيه مواقع كثيرة تقدم لك قوالب مجانية منها :

http://www.freecsstemplates.org/

اكتب فقط في قوقل : free css template

ستظهر لك قائمة طويلة من المواقع والله يعينك تبحث :)

تحياتي

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

يا سلام على الشغل يا ابو حميد ايه الحلاوه دى

بارك الله فيك يا ابو حميد :)

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

الدرس جميل جدا جدا اخى الكريم :)

متابعة .....

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

شرح اكثر من رائع بارك الله فيك اخي واصل عطائك

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

أشكركم على التفاعل .. وأعتذر بشدة عن التأخر لظروف خارجة عن قدرتي :blush:

حسنا نكمل ما انتهينا عنده :)

الآن سنقوم بإنشاء servlet يتحكم في الطلبات القادمة إلى السيرفر ويوجهها حسب الحدث المطلوب .. لاحظ الصورة الآتية:

post-231827-030471600 1305063104_thumb.g

سيكون نقطة التحكم في الطلبات ..

إذا على مجلد الـ source packages باليمين ثم جديد ثم servlet :

post-231827-081567100 1305063146_thumb.g

نسمي الـ package والفئة :

package : com.arabteam.Market

servlet : control

نجعل مساره الافتراضي وهو : /control

مع ملاحظة التأشير على Add information to deployment descriptor

post-231827-013015700 1305062978_thumb.g

إذا سيضيف بيانات الـ servlet للملف web.xml تلقائيا :


<servlet>
<servlet-name>control</servlet-name>
<servlet-class>com.arabteam.Market.control</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>control</servlet-name>
<url-pattern>/control</url-pattern>
</servlet-mapping>

راح يفتح لك ملف الـ servlet ، قم بحذف دالة الـ doProcess وامسحها من الدالتين doGet و doPost ، ليكون بهذا الشكل :


package com.arabteam.Market;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
*
* @author Admin
*/
public class control extends HttpServlet {

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

}
}

جميل جد!

الآن سنجعل الوارد إلى السيرفر عن طريق الدالة GET يتحول إلى POST من خلال استدعاء الدالة doPost في الدالة doGet ..

أضف هذا السطر إلى الدالة doGet :


doPost(request, response);

الآن نقوم بالتحكم في توجيه الطلبات في دالة الـ doPost ... في كل رابط سنستخدم متغير ولنسمه مثلا action ، مثال حتى يتوضح المقال

خلال الوسم <a> :


<a href="/ArabTeamMarket/control?action=cart">link 1</a>

سنتعرف على الصفحة الهدف من هذا المتغير .. حسنا سنقوم باستدعاء هذا المتغير من خلال الدالة getParameter .. في الدالة doPost أضف الأسطر التالية "مبدأيا" :


String path = "/index.jsp";
String act = request.getParameter("action");
if(act != null){
if(act.equalsIgnoreCase("home")){
path = "/index.jsp";
}
if(act.equalsIgnoreCase("cart")){
path = "/protect/cart.jsp";
}
}
try {
request.getRequestDispatcher(path).forward(request, response);
} catch (Exception ex) {
ex.printStackTrace();
}

في الكود أعلاه افترضنا ان الصفحة المراد فتحها هي الصفحة الرئيسة ، في حالة أن الـ action ليس فارغا فقم بالتعديل :

إن كان مساويا لـ home فانتقل إلى الصفحة الرئيسة

إن كان مساويا لـ cart فانقله إلى صفحة الـ cart

لاحظ أني أعطيته الرابط مابعد المجلد الرئيسي .. او مايسمى Context Path ..

سنقوم الآن بتعريف أحد المتغيرات العامة على مستوى التطبيق.. فبدلا عن كتابة هذا المسار :


/ArabTeamMarket/control

في كل مرة يقوم العميل بطلب البيانات من السيرفر ، سنقوم بكتابته مرة واحدة فقط في ملف web.xml ، أضف مايلي :


<context-param>
<description>control servlet path</description>
<param-name>base</param-name>
<param-value>/ArabTeamMarket/control</param-value>
</context-param>

كيف نستدعي هذه القيمة في الصفحة؟ :)


<% String control =(String) application.getInitParameter("base"); %>

حسنا سيتغير الرابط السابق إلى :


<li> <a href=<%= control %>?action=home>Home</a></li>

الآن نعدل على ملفات الهيدر والفوتر .. بإضافة ماذكرناه آنفا ..

سيصبح بعد التعديل :


<%-- any content can be specified here e.g.: --%>
<%@ page pageEncoding="windows-1256" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>:: Arab Team Market ::</title>
</head>
<body>
<% String control =(String) application.getInitParameter("base"); %>
<div id="header">
<div id="logo">
<h1><a href="#">Super Market</a></h1>
<h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
</div>
<!-- end div#logo -->
<div id="menu">
<ul>
<li class="active"><a href=<%= control %>>Home</a></li>
<li><a href=<%= control %>?action=categories>categories</a></li>
<li><a href=<%= control %>?action=about>About</a></li>
<li><a href=<%= control %>?action=contact>Contact</a></li>
<li><a href=<%= control %>?action=cart>My Cart</a></li>
</ul>
</div>
<!-- end div#menu -->
</div>

نضيف في الـ servlet بقية الصفحات .. ليصبح بعد التعديل بهذا الشكل :


/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package com.arabteam.Market;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
*
* @author Admin
*/
public class control extends HttpServlet {

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String path = "/index.jsp";
String act = request.getParameter("action");
if(act != null){
if(act.equalsIgnoreCase("home")){
path = "/index.jsp";
}
else if(act.equalsIgnoreCase("cart")){
path = "/protect/cart.jsp";
}
else if(act.equalsIgnoreCase("categories")){
path = "/protect/category.jsp";
}
else if(act.equalsIgnoreCase("contact")){
path = "/contact.jsp";
}
else if(act.equalsIgnoreCase("about")){
path = "/about.jsp";
}
}

request.getRequestDispatcher(path).forward(request, response);



}
}

كما لا ننسى إضافة الصفحات :

about.jsp و contact.jsp في المجلد العام

بنفس الطريقة السابقة نقوم بنسخ محتويات الـ index إليهما "مبدأيا" ونضيفهما إلى مجموعة الهيدر والفوتر .. راجع ردودي السابقة.

ستكون هيكلة الموقع كالآتي:

post-231827-044737200 1305067525_thumb.g

أي استفسار حياكم :)

انتظروني الدرس القادم ، وعسى أن يكون قريبا جدا. :wink:

تحياتي

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

سلمت java porgrammer ]ابدعت فأجدت

واصل اخي ابداعك

لك ارق التحايا

ننتظر القاادم :)

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

ما شاء الله تبارك الرحمن

مبدع

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

+3

يبدوا انه فاتني الكثير هنا ...

شكرا لك عزيزي JavaPorgrammer

ان شاء الله تعالى ساقوم بتنفيذ ما ورد في الشرح

وشكرا على الاداه MySql Workbench جديده على .

تم تعديل بواسطه العيافـي
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

شاكر للإخوة الاهتمام والمرور الكريم..

نكمل ماتوقفنا عنده ..

نعرف الآن مصدر البيانات للمشروع ..

نحدد المشروع ثم ملف جديد ، ونختار glassfish ومن القائمة اليمنى نختار JDBResource

post-231827-013046100 1307270250_thumb.g

نطلب منه انشاء connection pool جديد ونعطي الـ JNDI الاسم : jdbc/db

post-231827-007755400 1307270519_thumb.g

التالي التالي :)

نعطي الـ connectionPool اسم :) ونختار بعدها من القائمة قاعدة البيانات اللي هي بمشروعنا : commerce

post-231827-037643900 1307270630_thumb.g

بعد كذا نعطيه بيانات قاعدة البيانات : الرابط اسم المستخدم كلمة المرور :)

post-231827-004775700 1307270737_thumb.g

ثم بعدها finish والحمدلله :lol:

الآن نعرفها في ملف الـ web.xml .. نفتح الملف ، من التبويب References :

post-231827-028959700 1307271134_thumb.g

بعدها نعطيه اسم الـ resource :

post-231827-010034900 1307271262_thumb.g

راح يضيف لك السطور الآتية في ملف الـ web.xml :


<resource-ref>
<res-ref-name>jdbc/db</res-ref-name>
<res-type>javax.sql.DataSource</res-type>
<res-auth>Container</res-auth>
<res-sharing-scope>Shareable</res-sharing-scope>
</resource-ref>

جميل .. نختبر الآن.. إحنا ماشين صح والا لا :)

أنشئ صفحة جديدة ..

اختر من تبويب الـ database من الـ palette -> تقرير DB Report

post-231827-054742800 1307271862_thumb.g

post-231827-095869000 1307271911_thumb.g

نكتب الاستعلام وهو جلب كل محتويات جدول الأصناف :)

ستكون الصفحة كالآتي :


<body>
<h1>Hello World!</h1><br/>
<sql:query var="result" dataSource="jdbc/db">
SELECT * FROM ctg
</sql:query>

<table border="1">
<!-- column headers -->
<tr>
<c:forEach var="columnName" items="${result.columnNames}">
<th><c:out value="${columnName}"/></th>
</c:forEach>
</tr>
<!-- column data -->
<c:forEach var="row" items="${result.rowsByIndex}">
<tr>
<c:forEach var="column" items="${row}">
<td><c:out value="${column}"/></td>
</c:forEach>
</tr>
</c:forEach>
</table>
</body>

بعد حفظها وتشغيلها المفترض ستكون النتيجة :

post-231827-010068600 1307272111_thumb.g

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

الى الامام مبدع مبدع مبدع يا ابو حميد :)

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

الأخ أحمد جزاكم الله كل خير على هذا المجهود الرائع

لكن لي سؤال أين تلك الملفات

نضيف إليه "مبدأيا" الصفحات :

cart -checkout - confirm

وكيف يتم إضافتها للمشروع

وجزاكم الله كل خير على هذا المجهود الرائع

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

بنفس طريقة إنشاء المجلد ، ستجد في الأسفل : JSP اختارها وراح تطلع لك نافذة تعطيها الاسم .

يعني من اسم المشروع بالزر الأيمن -> تختار new -> تختار JSP

تم تعديل بواسطه JavaPorgrammer
1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

من فضلك سجل دخول لتتمكن من التعليق

ستتمكن من اضافه تعليقات بعد التسجيل



سجل دخولك الان

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .