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

#124 أبريل 2011 في 22:20 صاحب الموضوع

بسم الله الرحمن الرحيم ..

الحمدلله والصلاة والسلام على رسوله الله وآله وصحبه ومن والاه أما بعد ..

أتيت بدرس هذا اليوم ، وسيكون ضمن سلسلة دروس إن شاء الله وإن كنت قد تأخرت فيه على بعض الإخوة .. -وأعتذ لهم عن ذلك-

وأرجو أن تعم الفائدة به ، وياحبذا الإخوة يعطونا اقتراحاتهم "مانستغني"..

كيف تنشأ موقع تجارة اليكتروني بسيط؟

دعونا نحدد احتياجات التشغيل والمراحل ..

نحتاج إلى :

1 - محرر الأكواد : netbeans .

تستطيع تحميله من خلال : http://www.netbeans.org

2- محرك قواعد البيانات : MySql .

تستطيع تحميله من خلال : http://dev.mysql.com/downloads/mysql/

3- سيرفر محلي وهو بالعادة يأتي مع الـ netbeans . سنتعامل في هذا الدرس مع glass fish

4- الأداة : MySql Workbench . "اختيارية"

تستطيع تحميلها من خلال : http://dev.mysql.com/downloads/workbench/5.2.html

5- الحزمة display-tag لاستخدامها في الجداول.

تستطيع تحميلها من خلال : http://www.displaytag.org/1.2/

6- قالب للموقع ، تستطيع تصميمه أنت وإن كنت على عجلة من أمرك "مثلي :lol: " فهناك قوالب مجانية متوفرة على الشبكة.

" سأرفقه لكم في حينه "

المراحل :

1- تصميم قاعدة البيانات .

2- بناء الكود.

دعونا نبدأ بالمرحلة الأولى :

ببساطة سنحتاج إلى أصناف ، هذه الأصناف كل صنف منها سيحتوي على عدة منتجات .. هذا فيما يتعلق في المنتجات ..

سنحتاج إيضا إلى جدول للعملاء..

وجدول للفواتير ..

هذه تقريبا أهم الجداول التي نحتاجها حاليا :)

قم بتشغيل الـ MySql Workbench :

الواجهة الرئيسة

ننشئ Model جديد من خلال النقر على :

ستكون الواجهة بهذا الشكل:

نغير اسم قاعدة البيانات من خلال نقرتين مزدوجتين على الايقونة :

نكتب اسم القاعدة : commerce ..

بعد ذلك نبدأ بالرسم والمتعة :P .. من الأعلى :"Add diagram"

ستكون الواجهة الرئيسية بهذا الشكل ..

حسنا الآن .. سنضيف الجداول .. ستكون أربعة جداوال :

جدول الأصناف .
جدول المنتجات.
جدول العملاء.
جدول الفواتير.

إذا نضيف الجدول الأول : ولنسمه مثلا : ctg "يحب اختصار الاسماء :P "

عن طريق الأيقونة :

نروح للمكان الفاضي يمين وننقر نقرة واحدة .. راح ينشئ جدول جديد:

ننقر نقرتين مزدوجتين حتى نغير اسمه ونضيف حقول ..

نضيف اسماء الحقول ..

PK : اختصار primary key مفتاح رئيس
NN: اختصار Not Null لا يسمح باستقبال القيم الفارغة
UQ: اختصار unique قيمة وحيدة لا يسمح بالتكرار
BIN: اختصار Binary يقوم بتحويل القيم المدخلة إلى النظام الثنائي
UN: اختصار unsigned لا يسمح باستقبال القيم السالبة
AI : اختصار auto increment عداد تلقائي
ZF : لا أعلم :P

في الخانة الأخيرة : default هنا نضع القيم الافتراضية للحقل في حالة عدم إدخال بيانات إليه ..

ستكون حقول الجداول كالآتي :

الأصناف .. ctg

+-------------+------------------+------+-----+---------+----------------+
| Field       | Type             | Null | Key | Default | Extra          |
+-------------+------------------+------+-----+---------+----------------+
| ctg_id      | int(10) unsigned | NO   | PRI | NULL    | auto_increment |
| ctg_name    | varchar(45)      | NO   |     | NULL    |                |
| ctg_pic_url | varchar(45)      | NO   |     | NULL    |                |
+-------------+------------------+------+-----+---------+----------------+

المنتجات .. prod

+------------+------------------+------+-----+---------+----------------+
| Field      | Type             | Null | Key | Default | Extra          |
+------------+------------------+------+-----+---------+----------------+
| prod_id    | int(10) unsigned | NO   | PRI | NULL    | auto_increment |
| prod_name  | varchar(45)      | NO   |     | NULL    |                |
| prod_price | decimal(5,2)     | NO   |     | NULL    |                |
| prod_desc  | tinytext         | YES  |     | NULL    |                |

+------------+------------------+------+-----+---------+----------------+

جدول العملاء customer

+-------------+------------------+------+-----+---------+----------------+
| Field       | Type             | Null | Key | Default | Extra          |
+-------------+------------------+------+-----+---------+----------------+
| cus_id      | int(10) unsigned | NO   | PRI | NULL    | auto_increment |
| cus_name    | varchar(45)      | NO   |     | NULL    |                |
| cus_user    | varchar(60)      | NO   |     | NULL    |                |
| cus_pass    | mediumtext       | NO   |     | NULL    |                |
| cus_phone   | int(11)          | YES  |     | NULL    |                |
| cus_email   | varchar(45)      | NO   |     | NULL    |                |
| cus_address | varchar(45)      | YES  |     | NULL    |                |
+-------------+------------------+------+-----+---------+----------------+

جدول الطلبات cus_order

+-----------------+------------------+------+-----+-------------------+---------
-------+
| Field           | Type             | Null | Key | Default           | Extra
       |
+-----------------+------------------+------+-----+-------------------+---------
-------+
| ord_id          | int(10) unsigned | NO   | PRI | NULL              | auto_inc
rement |
| amount          | decimal(6,2)     | NO   |     | NULL              |
       |
| date            | timestamp        | NO   |     | CURRENT_TIMESTAMP |
       |
| num_config      | int(10) unsigned | NO   |     | NULL              |
       |
       |
+-----------------+------------------+------+-----+-------------------+---------
-------+

بعد ما ننشئ الجداول نأتي الآن إلى مرحلة الربط بينها ..

كل صنف يحوي اكثر من منتج .. إذا ستكون العلاقة واحد لمتعدد

كل عميل قد يكون له اكثر من فاتورة اذا ستكون العلاقة واحد لمتعدد

كل فاتورة قد تحوي عدة منتجات وكل منتج قد يكون موجود في عدة فواتير اذا العلاقة متعدد لمتعدد ..

كيف نمثل هذه العلاقة ؟

بالنسبة لعلاقة واحد لمتعدد "one- to- many" اولا نختار الايقونة :

بالاول نروح للمتعدد ثم للوحيد . . راح اوضح لك ..

كل منتج يحوي اكثر من صنف [المنتج = وحيد] ، [الصنف = متعدد] اذا بعد مانختار الايقونة نضغط بالاول على جدول الاصناف ثم نضغط على جدول المنتجات ، هكذا ينشئ العلاقة بين الجدولين ..

نكرر العملية نفسها مع جدول [العميل = وحيد ] ، [الفاتورة = متعدد] ..

نأتي الآن إلى إنشاء العلاقة متعدد مع متعدد .. ستجد الايقونة التالية :

اضغط عليها واضغط على الجدولين ، الترتيب هنا غير مهم .. سينشئ علاقة جديدة .. الآن سيكون شكل الرسم كالآتي :

تمااام .. الآن قاعدة البيانات جاهزة للبناء :) سنصدرها إلى محرك قاعدة البيانات في الدرس القادم بإذن الله .. انتظرونا :wink:

تحياتي للجميع.

المرفقات

عفواً أحبتي انقطاعي بسبب الدراسة دعواتكم بالتوفيق..

{ لا ينال العلم مستحٍ ولا مستكبر }

#225 أبريل 2011 في 01:46

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

#325 أبريل 2011 في 01:56

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

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

#425 أبريل 2011 في 08:36

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

سأل الممكن المستحيل : أين تقيم ؟ فأجابه في أحلام العاجز

----------------------------------------

نمضى النصف الأول من حياتنا بحثاً عن المال والنجاح والشهرة ونمضى

النصف الثانى منها بحثاً عن الأطباء

-----------------------------------------

شخصٌ يرى ذا الكون وهو جالسٌ ويجوب هذي الأرض بين الدول

#526 أبريل 2011 في 12:06

تم التثبيت ..

#626 أبريل 2011 في 14:12

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

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

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

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

نتابع ..

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

كذا خلصنا :)

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

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

ممتاز !

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

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

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

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

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

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

sqlFile.sql

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

Model.rar

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

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

المرفقات

عفواً أحبتي انقطاعي بسبب الدراسة دعواتكم بالتوفيق..

{ لا ينال العلم مستحٍ ولا مستكبر }

#726 أبريل 2011 في 23:01

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

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

#827 أبريل 2011 في 01:22

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

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

#927 أبريل 2011 في 11:17

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

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

#1028 أبريل 2011 في 20:44

رائع كالعادة يا احمد :)

سأل الممكن المستحيل : أين تقيم ؟ فأجابه في أحلام العاجز

----------------------------------------

نمضى النصف الأول من حياتنا بحثاً عن المال والنجاح والشهرة ونمضى

النصف الثانى منها بحثاً عن الأطباء

-----------------------------------------

شخصٌ يرى ذا الكون وهو جالسٌ ويجوب هذي الأرض بين الدول

#1130 أبريل 2011 في 09:00

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

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

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

﴿وَمَا كَانَ اللَّهُ لِيُعَذِّبَهُمْ وَأَنْتَ فِيهِمْ ۚ وَمَا كَانَ اللَّهُ مُعَذِّبَهُمْ وَهُمْ يَسْتَغْفِرُونَ﴾

الأنفال ۳۳

#1230 أبريل 2011 في 18:39

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

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

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

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

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

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

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

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

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

حلو!

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

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

cart -checkout - confirm

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

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

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

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

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

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

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

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

<%-- 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 إلى المشروع من خلال :

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

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

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

/index.jsp
/protect/*

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

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

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

<%@page 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>

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

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

:)

المرفقات

عفواً أحبتي انقطاعي بسبب الدراسة دعواتكم بالتوفيق..

{ لا ينال العلم مستحٍ ولا مستكبر }

#1330 أبريل 2011 في 23:25

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

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

#1430 أبريل 2011 في 23:35

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

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

http://www.freecsstemplates.org/

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

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

تحياتي

عفواً أحبتي انقطاعي بسبب الدراسة دعواتكم بالتوفيق..

{ لا ينال العلم مستحٍ ولا مستكبر }

#151 مايو 2011 في 09:53

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

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

سأل الممكن المستحيل : أين تقيم ؟ فأجابه في أحلام العاجز

----------------------------------------

نمضى النصف الأول من حياتنا بحثاً عن المال والنجاح والشهرة ونمضى

النصف الثانى منها بحثاً عن الأطباء

-----------------------------------------

شخصٌ يرى ذا الكون وهو جالسٌ ويجوب هذي الأرض بين الدول

#161 مايو 2011 في 14:41

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

متابعة .....

#176 مايو 2011 في 15:21

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

#1811 مايو 2011 في 01:49

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

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

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

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

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

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

package : com.arabteam.Market

servlet : control

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

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

إذا سيضيف بيانات الـ 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 إليهما "مبدأيا" ونضيفهما إلى مجموعة الهيدر والفوتر .. راجع ردودي السابقة.

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

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

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

تحياتي

المرفقات

عفواً أحبتي انقطاعي بسبب الدراسة دعواتكم بالتوفيق..

{ لا ينال العلم مستحٍ ولا مستكبر }

#1911 مايو 2011 في 21:11

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

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

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

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

#2011 مايو 2011 في 23:09

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

مبدع

#2112 مايو 2011 في 16:12

مبدع يا احمد :)

سأل الممكن المستحيل : أين تقيم ؟ فأجابه في أحلام العاجز

----------------------------------------

نمضى النصف الأول من حياتنا بحثاً عن المال والنجاح والشهرة ونمضى

النصف الثانى منها بحثاً عن الأطباء

-----------------------------------------

شخصٌ يرى ذا الكون وهو جالسٌ ويجوب هذي الأرض بين الدول

#221 يونيو 2011 في 15:31

+3

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

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

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

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

تم تعديل هذه المشاركة بواسطة العيافـي في 1 يونيو 2011 في 15:32

#235 يونيو 2011 في 14:11

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

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

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

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

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

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

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

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

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

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

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

راح يضيف لك السطور الآتية في ملف الـ 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

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

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

<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>

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

المرفقات

عفواً أحبتي انقطاعي بسبب الدراسة دعواتكم بالتوفيق..

{ لا ينال العلم مستحٍ ولا مستكبر }

#245 يونيو 2011 في 21:30

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

سأل الممكن المستحيل : أين تقيم ؟ فأجابه في أحلام العاجز

----------------------------------------

نمضى النصف الأول من حياتنا بحثاً عن المال والنجاح والشهرة ونمضى

النصف الثانى منها بحثاً عن الأطباء

-----------------------------------------

شخصٌ يرى ذا الكون وهو جالسٌ ويجوب هذي الأرض بين الدول

#2512 يونيو 2011 في 16:16

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

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

اقتباس
نضيف إليه "مبدأيا" الصفحات :
cart -checkout - confirm

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

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

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

المرفقات

المرفقات

المرفقات

المرفقات

المرفقات

مواضيع مشابهة