‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫‪XEON‬‬ ‫‪SKYLAKE‬‬ ‫‪SERVERS‬‬

‫!‪E3-1240v5, 10 Gbps Port, Up To 64GB RAM, 1h Setup Time. Deploy Now‬‬

‫‪PROFESSIONAL COURSE FOR NEWBIE TO LEARN PHP&CSS‬‬

‫ﺑﺴﻢ ﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ‬

‫ﻓﮭﺮس اﻟﺪروس‪:‬‬

‫‪-1‬اﻟﺠﺰء اﻻول‪:‬ﺷﺮح ﺑﺮﻣﺠﺔ وﺗﺼﻤﯿﻢ ﻣﻮﻗﻊ ب ‪php+css‬‬

‫وﯾﺸﻤﻞ ﺗﺠﮭﯿﺰ اﻟﻤﻠﻔﺎت‪+‬ﺗﻜﻮﯾﺪ اﻟﻤﻠﻔﺎت ب ‪html+css‬‬

‫‪-2‬اﻟﺠﺰء اﻟﺜﺎﻧﻰ‪:‬اﻟﺘﻄﻮﯾﺮ اﻟﺜﺎﻧﻰ ﻟﺪرس ﺑﺮﻣﺠﺔ وﺗﺼﻤﯿﻢ ﻣﻮﻗﻊ ب‪php+css‬‬

‫وﯾﺸﻤﻞ ﺗﺤﺴﯿﻦ اﻟﻤﻈﮭﺮ اﻟﺠﻤﺎﻟﻰ ﻟﻤﻠﻔﺎت اﻟﻤﻮﻗﻊ ﺑﺎﻟﺘﺼﻤﯿﻢ اﻟﻤﻄﻮر‪web2.0‬‬

‫‪-3‬اﻟﺠﺰء اﻟﺜﺎﻟﺚ‪:‬اﻟﺘﻄﻮﯾﺮ اﻟﺜﺎﻟﺚ ﻟﺪرس ﺑﺮﻣﺠﺔ وﺗﺼﻤﯿﻢ ﻣﻮﻗﻊ ب ‪php+css‬‬

‫وﯾﺸﻤﻞ ﻛﯿﻔﯿﺔ اﻟﺘﺨﻄﯿﻂ ﻟﺒﺮﻣﺠﺔ ﻟﻮﺣﺔ ﺗﺤﻜﻢ اﻟﻤﻮﻗﻊ‬

‫‪-4‬اﻟﺠﺰء اﻟﺮاﺑﻊ‪:‬اﻟﺘﻄﻮﯾﺮ اﻟﺮاﺑﻊ ﻟﺪرس ﺑﺮﻣﺠﺔ وﺗﺼﻤﯿﻢ ﻣﻮﻗﻊ ب ‪php+css‬‬

‫وﯾﺸﻤﻞ ﺑﺮﻣﺠﺔ ﻣﻠﻔﺎت ﻟﻮﺣﺔ ﺗﺤﻜﻢ اﻟﻤﻮﻗﻊ ﻟﻠﺘﺤﻜﻢ ﺑﺎﻟﻤﻘﺎل‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪1/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫ﻧﻌﻮد ﻣﻌﻜﻢ أﻋﻀﺎء ﻣﻮﻗﻌﻨﺎ اﻟﻜﺮام ‪ ,‬وﻓﻰ ھﺬا اﻟﺪرس ﺳﻮف ﻧﺸﺮح ﺑﺎﻟﺘﻔﺼﯿﻞ ﻛﯿﻒ ﯾﻤﻜﻨﻚ ان ﺗﻨﺸﺄ ﻣﻮﻗﻊ ﺑﺴﯿﻂ ﻣﺴﺘﺨﺪﻣﺎ ﻓﯿﮫ ال‪,css‬ﺑﺤﯿﺚ ﯾﻜﻮن ﺗﺼﻤﯿﻢ ﻣﻨﻈﻢ ‪,‬‬
‫ﺑﻞ واﻷﺟﻤﻞ ﻣﻦ ذﻟﻚ ﺳﻮف ﺗﺘﻌﻠﻢ ﻓﻰ ھﺬا اﻟﺪرس ﻛﯿﻒ ﺗﺴﺘﺨﺪم ‪ ,php‬ﺣﺘﻰ ﺗﺠﻌﻞ ﺻﻔﺤﺎت اﻟﻤﻮﻗﻊ ﻋﻠﻰ ھﯿﺌﺔ ﻗﺎﻟﺐ‪ ,‬ﯾﻤﻜﻨﻚ ﻓﯿﻤﺎ ﺑﻌﺪ اﻟﺘﻄﻮﯾﺮ ﻋﻠﯿﮫ ﺑﻜﻞ ﺳﮭﻮﻟﮫ‬
‫وﺑﺪون ﺗﻌﻘﯿﺪ‪..........‬‬

‫اوﻻ ﺧﻠﻮﻧﺎ ﻧﺸﻮف اﻟﻨﺘﺎﺋﺞ اﻟﻨﮭﺎﺋﯿﮫ ﻟﻤﻮﻗﻌﻨﺎ‪:‬‬

‫‪-1‬ﻗﺒﻞ ﺗﻨﺴﯿﻖ وﺗﻨﻈﯿﻢ اﻟﺼﻔﺤﺔ ب‪css+php‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪2/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫‪-2‬ﺑﻌﺪ ﺗﻨﺴﯿﻖ اﻟﺼﻔﺤﺔ ب ‪css+php‬‬

‫اوﻻ‪ :‬اﻟﺘﺨﻄﯿﻂ ﻟﻜﯿﻔﯿﺔ ﺑﻨﺎء اﻟﻤﻮﻗﻊ‪:‬‬

‫ﻛﻤﺎ ﻋﻮدﻧﺎﻛﻢ داﺋﻤﺎ اﻧﻚ ﻻﺑﺪ ان ﺗﻀﻊ ﺑﺮأﺳﻚ ﻣﺎذا ﺳﺘﻔﻌﻞ‪ ,‬ﻻن اﻟﺘﺨﻄﯿﻂ ھﻮ أھﻢ ﺷﻰء ﻓﻰ ان ﯾﺨﺮج ﻣﻮﻗﻌﻚ ﺑﺼﻮرة ﺟﯿﺪه‪.‬‬

‫ﻟﺬﻟﻚ أﻧﺎ أﺣﻀﺮت ورﻗﮫ وﻗﻠﻢ ووﺿﻌﺖ ﺑﺮاﺳﻰ ﺷﻮ ﺑﺪى أﺳﻮى ‪ ,‬وھﺬا ھﻮ اﻟﻤﺨﻄﻂ اﻟﻠﻰ راح ﻧﺒﻨﻰ ﻋﻠﻰ أﺳﺎﺳﮫ ﻣﻮﻗﻌﻨﺎ‪.......‬‬

‫ﺗﻤﺎم ‪ ,‬ﻣﻦ اﻟﺼﻮرة ﯾﺘﻀﺢ أﻧﺎ ﺑﺤﺎﺟﮫ ﻟﻼﺗﻰ ﺑﺎﻟﺘﺮﺗﯿﺐ ﻋﻠﻰ ﺣﺴﺐ ﻣﺎ راح ﻧﺒﺪأ ﺑﮫ ﺧﻄﻮه ﺧﻄﻮه‪.......‬‬

‫‪-1‬اﻧﺸﺎء ﻣﻠﻒ ‪ << index.html‬وﺑﮫ ﻛﻮد ﺗﺼﻤﯿﻢ اﻟﺼﻔﺤﺔ ﻛﻜﻞ ﻣﻘﺴﻤﺔ ﻛﺒﻠﻮﻛﺎت )ھﯿﺪر‪-‬ﻧﺎف ﺑﺎر‪-‬ﻓﻮﺗﺮ‪-‬ﻗﺎﺋﻤﺔ ﺟﺎﻧﺒﯿﮫ ‪-‬ﻗﺎﺋﻤﺔ اﻟﻤﻘﺎﻻت(‬

‫‪-2‬اﻧﺸﺎء ﻣﻠﻒ ‪ << style.css‬وﺑﮫ ﻛﻮد ‪ css‬اﻟﻠﻰ ﺑﻮاﺳﻄﺘﮫ راح ﻧﻘﺴﻢ ﺻﻔﺤﺘﻨﺎ اﻟﻰ ھﺬه اﻟﺒﻠﻮﻛﺎت اﻟﺴﺎﺑﻘﮫ‪.‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪3/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫‪-3‬اﻧﺸﺎء ﻣﺠﻠﺪ ‪ << images‬وﺑﺪاﺧﻠﮫ ﺻﻮر اﻟﺘﺼﻤﯿﻢ ﻟﻠﻤﻮﻗﻊ‬

‫‪-4‬اﻧﺸﺎء ﻣﺠﻠﺪ ‪<< includes‬وﺑﺪاﺧﻠﮫ اﻟﻤﻠﻔﺎت اﻷﺗﯿﮫ ‪:‬‬

‫‪-‬ﻣﻠﻒ ‪ << header.php‬وﺑﮫ راح ﻧﻘﺘﻄﻊ ﻛﻮد اﻟﮭﯿﺪر ﻣﻦ ﻣﻠﻒ ‪, index‬وﻧﻀﻌﮫ ﺑﮫ ‪ ,‬ﺣﺘﻰ ﯾﺴﮭﻞ اﻟﺘﻌﺪﯾﻞ ﻋﻠﯿﮫ ﻓﯿﻤﺎ ﺑﻌﺪ‬

‫‪-‬ﻣﻠﻒ ‪<< nav.php‬وﺑﮫ راح ﻧﻘﺘﻄﻊ ﻛﻮد اﻟﻨﺎف ﺑﺎر ﻣﻦ ﻣﻠﻒ ‪,index‬وﻧﻀﻌﮫ ﺑﮫ‪,‬ﺣﺘﻰ ﯾﺴﮭﻞ اﻟﺘﻌﺪﯾﻞ ﻋﻠﯿﮫ ﻓﯿﻤﺎ ﺑﻌﺪ‬

‫‪-‬ﻣﻠﻒ ‪ << sidebar.php‬وﺑﮫ راح ﻧﻘﺘﻄﻊ ﻛﻮد اﻟﻘﺎﺋﻤﺔ اﻟﺠﺎﻧﺒﯿﺔ ﻣﻦ ﻣﻠﻒ ‪,index‬وﻧﻀﻌﮫ ﺑﮫ ‪ ,‬ﺣﺘﻰ ﯾﺴﮭﻞ اﻟﺘﻌﺪﯾﻞ ﻋﻠﯿﮫ ﻓﯿﻤﺎ ﺑﻌﺪ‬

‫‪-‬ﻣﻠﻒ ‪ << footer.php‬وﺑﮫ راح ﻧﻘﺘﻄﻊ ﻛﻮد اﻟﻔﻮﺗﺮ ﻣﻦ ﻣﻠﻒ ‪ index‬وﻧﻀﻌﮫ ﺑﮫ ‪ ,‬ﺣﺘﻰ ﯾﺴﮭﻞ اﻟﺘﻌﺪﯾﻞ ﻋﻠﯿﮫ ﻓﯿﻤﺎ ﺑﻌﺪ‬

‫‪-5‬اﻧﺸﺎء ﻣﺠﻠﺪ ‪ << variables‬وﺑﺪاﺧﻠﮫ ﻣﻠﻒ أﻛﻮاد ‪ ,php‬اﻟﺘﻰ راح ﻧﻀﻌﮭﺎ ﺣﺘﻰ ﻧﺠﻌﻞ اﻟﻤﻮﻗﻊ أﻛﺜﺮ دﯾﻨﺎﻣﯿﻜﯿﮫ وﺣﺮﻛﮫ أﻛﺜﺮ‬

‫واﻟﻤﻠﻒ ھﻮ‬

‫‪-‬ﻣﻠﻒ ‪variables.php‬‬

‫ﺑﮭﯿﻚ أﻋﺘﻘﺪ ﺳﻮﯾﻨﺎ ﺗﺨﻄﯿﻂ ﺟﯿﺪ ﻓﯿﻤﺎ راح ﻧﻔﻌﻠﮫ‪ ,‬ﻟﺬﻟﻚ دﻋﻨﺎ ﻧﻨﻄﻠﻖ ﺑﻨﺎءا ﻋﻠﻰ ھﺬا اﻟﻤﺨﻄﻂ اﻟﻌﻤﻞ ﻓﻰ اﻟﻄﺮﯾﻖ ﻻﻧﮭﺎء ﺑﺮﻣﺠﺔ وﺗﺼﻤﯿﻢ ﻣﻮﻗﻌﻨﺎ ﺑﻜﻞ ﺳﮭﻮﻟﮫ ان ﺷﺎء‬
‫ﷲ ‪...‬‬

‫‪-1‬اﻧﺸﺎء ﻣﻠﻒ ‪index.html‬‬

‫اوﻻ‪ :‬ﻓﻰ ﻣﻠﻒ ‪ ,index‬راح ﻧﺴﻮى ‪ , div 5‬اى ‪ 5‬ﺑﻠﻮﻛﺎت ‪ ,‬ﺑﺤﯿﺚ ﻛﻞ ﺑﻠﻮك ﯾﺸﻤﻞ ﺟﺰء ﻣﻌﯿﻦ ﻣﻦ اﻟﺼﻔﺤﺔ ‪..‬‬

‫‪ div-‬ﻟﻠﺼﻔﺤﺔ وﻛﻞ واﺳﻤﮫ ‪wrapper‬‬

‫‪-‬ﺑﺪاﺧﻞ ‪ div‬ال ‪ ,wrapper‬راح ﻧﺴﻮى ‪ div‬ﻟﻼﺗﻰ‪:‬‬

‫‪ div-‬ﻟﻠﮭﯿﺪر واﺳﻤﮫ ‪header‬‬

‫‪ div-‬ﻟﻠﻨﺎف ﺑﺎر واﺳﻤﮫ ‪nav‬‬

‫‪ div-‬ﻟﻠﻤﻘﺎﻻت واﺳﻤﮫ ‪content‬‬

‫‪ div-‬ﻟﻠﻘﺎﺋﻤﺔ اﻟﺠﺎﻧﺒﯿﺔ واﺳﻤﮫ ‪sidebar‬‬

‫‪ div-‬ﻟﻠﻔﻮﺗﺮ واﺳﻤﮫ ‪footer‬‬

‫وھﺬا ھﻮ اﻟﻜﻮد ﻓﻰ ﻣﺒﺪﺋﯿﺎ ﻗﺒﻞ ان ﻧﻜﻤﻞ ﻋﻠﯿﮫ‬

‫رﻣﺰ ‪:Code‬‬
‫>"‪<div id="wrapper‬‬

‫>‪<div id="header"></div‬‬

‫>‪<div id="nav"></div‬‬

‫>‪<div id="content"></div‬‬

‫>‪<div id="sidebar"></div‬‬

‫>‪<div id="footer"></div‬‬

‫>‪</div‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪4/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫>‪</p‬‬
‫ﻧﺴﺘﻜﻤﻞ اﻻن ﻟﻨﻘﻮم ﺑﻤﻸ ﻛﻞ ‪ div‬ﺑﻤﺎ ﯾﻨﺎﺳﺒﮫ‪ ,‬اﻟﻰ ان ﯾﺤﯿﻦ ﺗﻌﺪﯾﻠﮫ وﺗﻘﺴﯿﻤﮫ ب‪..... css‬‬
‫‪<p>------------------------------------------------------------------------------------------‬‬

‫>‪<p‬‬
‫‪ div-1‬ال‪<< header‬راح ﻧﻀﻊ ﺑﮫ ﻋﻨﻮان اﻟﻤﻮﻗﻊ‬
‫‪ ,‬ﯾﻌﻨﻰ ﻣﺎ ﺗﺸﯿﻠﻮا ھﻢ‬ ‫ﺨﺺ ﻟﻜﻢ ﻛﺎﻓﺔ اﻟﻤﻘﺎﺑﻼت اﻟﺸﺨﺼﯿﺔ ﻟﻠﻤﺒﺮﻣﺠﯿﻦ ‪ ,‬واﻟﺤﻤﺪﷲ اﻟﻠﻐﺔ ﻣﻮﺟﻮده ﺑﺄذن‬
‫‪ div-2‬ال‪<< nav‬راح ﻧﻀﻊ ﻟﻨﻜﺎت اﻟﻤﻮﻗﻊ اﻟﺮﺋﯿﺴﯿﺔ‬
‫>‪</p‬‬

‫>‪</div‬‬
‫‪ div-3‬ال‪<< content‬راح ﻧﻀﻊ ﺑﮫ اﻟﻤﻘﺎﻻت‬

‫>"‪<div id="sidebar‬‬ ‫‪ div-4‬ال‪<< sidebar‬راح ﻧﻀﻊ ﺑﮫ ﻟﻨﻜﺎت اﻟﻘﺎﺋﻤﺔ اﻟﺠﺎﻧﺒﯿﮫ‬

‫>‪</h3‬اﻟﻘﺎﺋــﻤــﮫ اﻟﺮﺋــﯿﺴﯿــﮫ>‪<h3‬‬ ‫‪ div-5‬اﻟﻔﻮﺗﺮ <<راح ﻧﻀﻊ ﺑﮫ ﺣﻘﻮق اﻟﻤﻮﻗﻊ‬

‫>‪</a></li‬اﻟﺮﺋﯿﺴﯿﺔ>"‪<li><a href="#‬‬
‫ﺑﺤﯿﺚ ﯾﻜﻮن اﻟﻜﻮد أﺻﺒﺢ ﻛﺎﻷﺗﻰ‪...‬‬
‫>‪</a></li‬اﻟﻤﻨﺘـﺪى>"‪<li><a href="#‬‬
‫>‪</a></li‬اﻻﺳﺘﻔـﺴﺎرات>"‪<li><a href="#‬‬
‫>‪</a></li‬اﻟﻤﻜﺘﺒـﺔ>"‪<li><a href="#‬‬
‫رﻣﺰ ‪:Code‬‬
‫>‪</a></li‬اﻟﺼـﻮر>"‪<li><a href="#‬‬

‫>‪</h3‬اﻟﺨﺪﻣـــﺎت اﻟﺨﺎرﺟﯿﮫ>‪<h3‬‬
‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬

‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬

‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬
‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬

‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬

‫>‪</h3‬اﻟﺪﻋﻢ اﻟﻔــﻨﻰ>‪<h3‬‬
‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬

‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬

‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬
‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬

‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬

‫>‪</div‬‬

‫>"‪<div id="footer‬‬
‫>‪ vista-design &copy;</a></p‬ﺗﺼﻤﯿﻢ وﺑﺮﻣﺠﺔ>"‪<p> <a href="http://advphp.com‬‬

‫>‪</div‬‬
‫>‪</div‬‬

‫ﺗﻤﺎم ﺑﮭﯿﻚ ﯾﻜﻮن اﻧﺘﮭﻰ ﻣﻠﻒ ‪ index‬ﺑﻜﻞ ﺳﮭﻮﻟﮫ وﺑﺪون اى ﺗﻌﻘﯿﺪ‪,‬‬

‫طﺒﻌﺎ ﻻﺗﻨﺴﻰ ﺗﻀﯿﻒ اﻟﻜﻮد داﺧﻞ وﺳﻢ ‪ html‬وال‪ body‬وال‪ ,head‬ﺣﺘﻰ ﺗﻜﺘﻤﻞ اﻟﺼﻔﺤﺔ ﺑﺤﯿﺚ ﯾﻜﻮن اﻟﺸﻜﻞ اﻟﻨﮭﺎﺋﻰ ﻣﻜﺘﻤﻞ‪.....‬‬

‫اﻧﺘﮭﻰ ﻣﻠﻒ ‪index.html‬‬

‫‪---------------------------------------‬‬

‫‪-2‬اﻧﺸﺎء ﻣﻠﻒ ‪style.css‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪5/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫ﻧﺴﺘﻜﻤﻞ ﻣﻌﻜﻢ ﻣﻊ اﻟﺠﺰء اﻻھﻢ ‪ ,‬وھﻮ اﻧﺸﺎء ﻣﻠﻒ اﻟﺘﻨﺴﯿﻖ ﻟﻠﺼﻔﺤﺔ وھﻮ ﻣﻠﻒ ‪style.css‬‬

‫ﺣﺘﻰ ﺗﻔﮭﻢ ھﺬا اﻟﺠﺰء ﺑﺸﻜﻞ ﻋﻠﻰ أﻋﻠﻰ درﺟﮫ ﻣﻦ اﻟﻔﮭﻢ‪ ,‬ﻓﺮاح ﻧﺄﺧﺬ اﻟﻨﺎﺗﺞ اﻟﻨﮭﺎﺋﻰ ﻟﻠﻨﺎﺗﺞ وﺷﻮف ﻛﯿﻒ اﻻﺑﻌﺎد واﻷواﻣﺮ‪.‬‬

‫ﯾﻤﻜﻨﻚ ﻣﺸﺎھﺪة اﻟﺼﻮرة ﺑﺤﺠﻢ أﻛﺒﺮ ﻣﻦ ھــــﻨـــــﺎ‬

‫وھﺬه ھﻮ ﻛﻮد ‪ css‬ﻛﻜﻞ ﻗﺒﻞ أن أﺷﺮﺣﮫ‪.‬‬

‫رﻣﺰ ‪:Code‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪6/45‬‬
8/18/2016 php ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف‬

#sidebar li {
list-style:none;
text-align:center;
}

#sidebar h3{
text-align:center;
}

#footer {

clear:both;
width:960px;
height:135px;
border-top:1px solid #ac8e33;
}

#footer p {

direction:rtl;
padding:10px;
}

#footer p a {
text-decoration:none;
}

:‫ ﻛﺎﻻﺗﻰ‬CSS ‫ اﺷﺮ ﻟﻤﻠﻒ‬HEAD ‫ وﺑﯿﻦ وﺳﻢ‬INDEX‫ روح ﻟﻤﻠﻒ‬,‫ ﻻﺗﻨﺴﻰ ان ﺗﺸﯿﺮ ﻟﻤﺴﺎر ھﺬا اﻟﻤﻠﻒ‬, ‫وﻗﺒﻞ ﺷﺮﺣﮫ‬

:Code ‫رﻣﺰ‬

<link rel="stylesheet" type="text/css" href="/style.css" media="screen" />

‫ ﺧﻄﻮه ﺧﻄﻮه‬css ‫ ﻧﺒﺪأ ﻧﺸﺮح ﻣﻠﻒ‬: ‫ﺗﻤﺎم‬

: ‫ وراح ﻧﺤﺪد ﻓﯿﮫ‬: body-1

background-color ‫ﻟﻮن ﺧﻠﻔﯿﺔ اﻟﺼﻔﺤﺔ‬-

font-family ‫ﻧﻮع اﻟﺨﻄﻮط ﺑﺎﻟﺼﻔﺤﺔ‬-

font-size ‫ﺣﺠﻢ اﻟﺨﻄﻮط‬-

margin ‫ ﺣﺘﻰ ﻻﯾﻮﺟﺪ اى ﻣﺴﺎﻓﺎت‬, ‫ﻣﺴﺢ اﻟﺤﻮاف اﻟﻌﻠﻮﯾﮫ ﻟﻠﺼﻔﺤﺔ‬-

:‫ داﯾﻤﺎ ﺗﺮﺗﯿﺐ اﻻﺑﻌﺎد ﯾﻜﻮن ﻛﺎﻷﺗﻰ‬padding‫او اﻟﻤﺤﺎذاه ال‬,margin ‫ ﻓﻰ اى ﻛﻮد ﯾﺨﺺ اﻟﺤﻮاف‬:‫ﻣﻼﺣﻈﮫ ﺗﺬﻛﺮھﺎ وﺿﻌﮭﺎ ﺑﺬھﻨﻚ‬

‫<ﺳﻔﻠﻰ<<ﯾﺴﺎر‬-- ‫<ﯾﻤﯿﻦ‬--‫ﻋﻠﻮى‬

‫ﺷﻮ اﻟﻘﺼﺪ؟‬

:‫أﻗﻮﻟﻚ ﻟﻮ ﺧﺬﻧﺎ ﻛﻮد ﻟﻠﺤﻮاف ﻛﺎﻻﺗﻰ‬

:Code ‫رﻣﺰ‬

margin: 2px 3px 4px 10px;

http://www.advphp.com/tuts/fullarticles/ 7/45
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫ُﻋﺪ اﻟﺤﺎﻓﺔ اﻟﻌﻠﻮﯾﮫ‬

‫‪<--2‬ھﻰ ب‬

‫ُﻋﺪ اﻟﺤﺎﻓﺔ اﻟﯿﻤﻨﻰ‬

‫‪<--3‬ھﻮ ب‬

‫ُﻋﺪ اﻟﺤﺎﻓﺔ اﻟﺴﻔﻠﯿﮫ‬

‫‪<--4‬ھﻮ ب‬

‫ُﻋﺪ اﻟﺤﺎﻓﮫ اﻟﯿﺴﺮى‬

‫‪<--10‬ھﻮ ب‬

‫طﺐ ﻣﺜﻼ ﻛﺎن اﻟﻜﻮد ﻛﺎﻻﺗﻰ‪:‬‬

‫رﻣﺰ ‪:Code‬‬

‫;‪margin: 2px auto‬‬

‫‪<--2‬ﯾﻘﺼﺪ ﺑﮭﺎ اﻟﺤﺎﻓﮫ اﻟﻌﻠﻮﯾﮫ‬

‫‪<--auto‬ﯾﻘﺼﺪ ﺑﮭﺎ اﻟﺤﺎﻓﮫ اﻟﯿﻤﻨﻰ‪ ,‬اﻧﮭﺎ ﻗﺎﺑﻠﮫ ﻟﻠﺘﻤﺪد ﻋﻠﻰ ﺣﺴﺐ ﻋﺮض اﻟﺼﻔﺤﺔ اﻟﻠﻰ راح ﺗﺄﺧﺬه‬

‫ﺣﺒﯿﺖ أﻧﺒﮭﻜﻢ ﻟﮭﺎﻟﻤﻼﺣﻈﮫ ﻻﻧﮭﺎ ﻣﮭﻤﮫ ﺟﺪا وراح ﺗﻮاﺟﮭﮭﺎ ﻛﺜﯿﺮ ﻓﻰ ﺷﻐﻠﻚ‪.......‬‬

‫‪ :wrapper-2‬وراح ﻧﺤﺪد ﻓﯿﮫ‬

‫‪-‬اﻟﻌﺮض‪width‬‬

‫‪-‬ﺻﻮرة اﻟﺨﻠﻔﯿﺔ ‪background-image‬‬

‫‪-‬اﻟﺤﻮاف ‪margin‬‬

‫‪-‬اﻟﺤﺪ اﻷﯾﺴﺮ واﻷﯾﻤﻦ ‪border-left,border-right‬‬

‫‪:header-3‬وراح ﻧﺤﺪد ﻓﯿﮫ‬

‫‪-‬اﻟﻄﻮل واﻟﻌﺮض ‪width-height‬‬

‫‪-‬اﻟﺤﺪ اﻟﺴﻔﻠﯿﮫ ‪border-bottom‬‬

‫‪-‬اﻟﺤﺪ اﻟﻌﻠﻮﯾﯿﮫ ‪border-top‬‬

‫‪-‬اﻟﺤﺎﻓﮫ اﻟﻌﻠﻮﯾﮫ واﻟﺴﻔﻠﯿﮫ ‪margin‬‬

‫ﺛﻢ ﺑﺪاﺧﻞ اﻟﮭﯿﺪر راح ﻧﺤﺪد ان اﻟﻨﺺ اﺗﺠﺎھﮫ ﻣﻦ اﻟﯿﻤﯿﻦ ﻟﻠﯿﺴﺎر وﻻ ﯾﻮﺟﺪ ﺣﺪ ﺑﺄﺳﻔﻞ ﻋﻨﻮان اﻟﻤﻮﻗﻊ‬

‫رﻣﺰ ‪:Code‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪8/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫{ ‪#header h2‬‬
‫;‪direction:rtl‬‬
‫;‪padding:10px‬‬

‫}‬

‫‪:nav-4‬وﺑﺪاﺧﻠﮫ راح ﻧﺤﺪد‬

‫‪-‬اﻟﻄﻮل واﻟﻌﺮض‬

‫‪-‬اﻟﺤﺎﻓﮫ اﻟﺴﻔﻠﯿﮫ‬

‫وﺑﺪاﺧﻞ اﻟﻨﺎف ‪ ,‬ﺑﺎﻟﻨﺴﺒﮫ ﻟﻠﻨﻜﺎت اﻟﻤﻮﻗﻊ اﻟﺮﺋﯿﺴﯿﺔ ‪#nav a‬‬

‫راح ﻧﺤﺪد ﻓﯿﮭﺎ‬

‫‪-‬ﻣﮭﻢ ﺟﺪا ‪<--‬ان ﺗﻜﻮن ﻋﻠﻰ ھﯿﺌﺔ ﺑﻠﻮﻛﺎت ‪+‬ان ﺗﻄﻔﻮ ﺑﺎﺗﺠﺎه ﻣﻦ اﻟﯿﻤﯿﻦ ﻟﻠﯿﺴﺎر ‪float right & display block‬‬

‫‪-‬وﻧﺤﺪد ﺧﻠﻔﯿﺔ اﻷزرار ‪background-color‬‬

‫‪-‬واﻟﻤﺤﺎذاه اﻟﻌﻠﻮﯾﮫ واﻟﺘﻰ راح ﺗﺤﺪد ارﺗﻔﺎع اﻟﺰر ‪padding‬‬

‫رﻣﺰ ‪:Code‬‬

‫{ ‪#nav a‬‬

‫;‪font-weight:bold‬‬
‫;‪display: block‬‬
‫;‪float:right‬‬
‫;‪padding:10px‬‬
‫;‪text-decoration:none‬‬
‫;‪background-color: #fbf1d5‬‬
‫}‬

‫وأﯾﻀﺎ‪ ,‬راح ﻧﺤﺪد اﻟﺘﺄﺛﯿﺮ اﻟﻠﻰ راح ﯾﺤﺪث ﻋﻨﺪ ﻣﺮور اﻟﻤﺎوس ﻋﻠﻰ اﻟﺰر ‪#nav a:hover‬‬

‫‪-‬اﻟﻠﻮن اﻟﻠﻰ راح ﯾﺄﺧﺬه اﻟﺰر ﻋﻨﺪ ﻣﺮور اﻟﻤﺎوس ‪background-color‬‬

‫‪-‬وارﺗﻔﺎع اﻟﺘﺄﺛﯿﺮ ﻟﻠﻮن ﻋﻠﻰ اﻟﺰر ‪height‬‬

‫رﻣﺰ ‪:Code‬‬

‫{ ‪#nav a:hover‬‬
‫;‪background-color:#fce18e‬‬
‫;‪height:20px‬‬
‫}‬

‫وﻛﻤﻞ وﺷﻮف ﺑﻘﯿﺔ اﻟﻜﻮد وراح ﺗﺠﺪه ﺑﺴﯿﻂ وﺳﮭﻞ ﻣﺜﻞ اﻟﺴﺎﺑﻖ‪................‬‬

‫اﻧﺘﮭﻰ ﻣﻠﻒ ‪css‬‬

‫‪----------------------------------------‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪9/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫‪-3‬اﻧﺸﺎء ﻣﺠﻠﺪ ‪ << images‬وﺑﮫ ﺿﻊ ﺻﻮرة اﻟﮭﯿﺪر وﺧﻠﻔﯿﺔ اﻟﺼﻔﺤﺔ‬

‫‪--------------------------------------‬‬

‫‪-4‬اﻧﺸﺎء ﻣﺠﻠﺪ ‪<<< includes‬‬

‫ﻓﻰ ھﺬا اﻟﻤﺠﻠﺪ راح ﻧﺴﻮى اﻟﻤﻠﻔﺎت اﻻﺗﯿﮫ ‪:‬‬

‫‪header.php-‬‬

‫‪nav.php-‬‬

‫‪sidebar.php-‬‬

‫‪footer.php-‬‬

‫راح أﺧﺬ ﻣﺜﺎل ﻟﻤﻠﻒ ﻣﻨﮭﻢ وﻧﻄﺒﻖ ﻋﻠﯿﮫ ‪ ...‬وﻟﯿﻜﻦ ‪header.php‬‬

‫ﻛﻤﺎ ﻗﻠﻨﺎ ﺳﺎﺑﻘﺎ ‪ ,‬ان ھﺬه اﻟﻤﻠﻔﺎت راح ﻧﻘﺘﻄﻊ ﻣﻦ ﻣﻠﻒ ‪, INDEX‬ﻛﻞ ﺑﻠﻮك وﻧﻀﻌﮫ ﻋﻠﻰ ﺣﺪا‬

‫ﻟﺬﻟﻚ ﺧﺬ ﻛﻮد ‪ header‬ﻣﻦ ﻣﻠﻒ ‪ ,index‬وﺿﻌﮫ ﺑﮫ‬

‫رﻣﺰ ‪:Code‬‬

‫>"‪<div id="header‬‬

‫>‪</h2‬ﻋﺎﻟﻢ ﻣﻄﻮرى اﻟﻮﯾﺐ ﻟﺘﻌﻠﯿﻢ اﻟﺒﺮﻣﺠﺔ واﻟﺘﺼﻤﯿﻢ>‪<h2‬‬

‫>‪</div‬‬

‫وﺑﺎﻟﻤﺜﻞ ﻓﻰ ﻣﻠﻒ ﺧﺬ ﻛﻞ ﺟﺰء وﺿﻌﮫ ﺑﮫ ‪............‬‬

‫‪-----------------------------‬‬

‫‪ -5‬اﻧﺸﺎء ﻣﺠﻠﺪ ‪variables‬‬

‫وﺑﺪاﺧﻠﮫ راح ﻧﻀﻊ ﻣﻠﻒ اﻟﺨﺎص ﺑﺄﻛﻮاد ال‪php‬‬

‫وﻣﻠﻔﻨﺎ راح ﯾﻜﻮن اﺳﻤﮫ ‪variables.php‬‬

‫ﻓﺎﺋﺪﺗﮫ‪:‬‬

‫‪-1‬ﻓﻠﻨﻔﺮض اﻧﻚ أردت ان ﺗﺴﻮى ﺟﻤﻠﮫ ‪ php‬ﻟﻨﺤﺪد ﺑﮫ اﺳﻢ ﻋﻨﻮان اﻟﻤﻮﻗﻊ ﻓﻰ اﻟﮭﯿﺪر ‪ ,‬ﺑﺤﯿﺚ ﯾﻤﻜﻨﻚ اﻟﺘﻐﯿﯿﺮ ﻋﻠﯿﮭﺎ ﻋﻦ طﺮﯾﻖ ھﺎﻟﻤﻠﻒ‬

‫‪-2‬ﻓﻠﻨﻔﺮض اﻧﻚ أردت ان ﺗﺴﻮى ﺟﻤﻠﮫ ‪ php‬ﻟﻨﺤﺪد ﺑﮫ ﺣﻘﻮق اﻟﻤﻮﻗﻊ واﻟﻔﻮﺗﺮ‪,‬ﺑﺤﯿﺚ ﯾﻤﻜﻨﻚ اﻟﺘﻐﯿﯿﺮ ﻋﻠﯿﮭﺎ ﻋﻦ طﺮﯾﻖ ھﺎﻟﻤﻠﻒ‪.‬‬

‫ﻧﺸﻮف ﻛﯿﻒ‪......‬‬

‫‪-1‬اﻓﺘﺢ ﻣﻠﻒ ‪ variables.php‬وﺿﻌﮫ ﺑﮫ ھﺎﻟﻜﻮد‪:‬‬

‫رﻣﺰ ‪:Code‬‬
‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪10/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫‪<?php‬‬

‫;'ﻋﺎﻟﻢ ﻣﻄﻮرى اﻟﻮﯾﺐ ﻟﺘﻌﻠﯿﻢ اﻟﺒﺮﻣﺠﺔ واﻟﺘﺼﻤﯿﻢ'=‪$heading‬‬

‫;'‪ vista-design‬ﺗﺼﻤﯿﻢ وﺑﺮﻣﺠﺔ'=‪$footer‬‬

‫>?‬

‫‪-2‬ارﺟﻊ ﻟﻤﻠﻒ ‪ header.php‬اﻟﻤﻮﺟﻮد ﺑﺪاﺧﻞ ﻣﻠﻒ ‪includes‬‬

‫ﺛﻢ راح ﻧﺴﺘﺒﺪل ﺟﻤﻠﮫ اﻟﮭﯿﺪر ‪ h2‬ﺑﺄﻣﺮ ‪ php‬ﺑﺤﯿﺚ ﻧﻘﺪر ﻧﺴﺘﺪﻋﻰ ھﺎﻟﺠﻤﻠﮫ ﻣﻦ ﻣﻠﻒ ‪variables.php‬‬

‫ﺑﻌﺪ ﻓﺘﺢ ﻣﻠﻒ ‪,header.php‬ﻧﺴﺘﺪﻋﻰ ﻣﻠﻒ ‪ variables.php‬ﺛﻢ ﻧﻌﻄﻰ أﻣﺮ اﻟﻄﺒﺎﻋﮫ ﻟﻼﻣﺮ‬

‫ﺑﺤﯿﺚ راح ﯾﺼﺒﺢ ﻛﻮد ﻣﻠﻒ ‪header.php‬‬

‫رﻣﺰ ‪:Code‬‬

‫>? ;)'‪<?php include('variables/variables.php‬‬

‫>"‪<div id="header‬‬

‫>‪<h2><?php echo $heading ?></h2‬‬

‫>‪</div‬‬

‫ﺑﺎﻟﻤﺜﻞ راح ﺗﻄﺒﻖ ﻧﻔﺲ اﻟﻨﻈﺎم ﻋﻠﻰ ﺑﻘﯿﺔ اﻟﺼﻔﺤﺎت ‪...............‬‬

‫أﺧﯿﺮا‪ :‬اﻓﺘﺢ ﻣﻠﻒ ‪ index.html‬ﺣﺘﻰ ﻧﺸﯿﺮ ﻟﻤﺴﺎر ﻣﻠﻔﺎﺗﻨﺎ داﺧﻞ ﻣﺠﻠﺪ ‪includes‬‬

‫ﺑﺤﯿﺚ ﯾﻜﻮن اﻟﻜﻮد اﻟﻨﮭﺎﺋﻰ ﻟﺼﻔﺤﺔ ‪ index‬ﻛﺎﻻﺗﻰ‬

‫رﻣﺰ ‪:Code‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪11/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫>‪<p‬‬

‫‪ ,‬ﯾﻌﻨﻰ ﻣﺎ ﺗﺸﯿﻠﻮا ھﻢ‬ ‫ﺨﺺ ﻟﻜﻢ ﻛﺎﻓﺔ اﻟﻤﻘﺎﺑﻼت اﻟﺸﺨﺼﯿﺔ ﻟﻠﻤﺒﺮﻣﺠﯿﻦ ‪ ,‬واﻟﺤﻤﺪﷲ اﻟﻠﻐﺔ ﻣﻮﺟﻮده ﺑﺄذن‬

‫>‪</p‬‬
‫‪<p>------------------------------------------------------------------------------------------‬‬

‫>‪<p‬‬

‫‪ ,‬ﯾﻌﻨﻰ ﻣﺎ ﺗﺸﯿﻠﻮا ھﻢ‬ ‫ﺨﺺ ﻟﻜﻢ ﻛﺎﻓﺔ اﻟﻤﻘﺎﺑﻼت اﻟﺸﺨﺼﯿﺔ ﻟﻠﻤﺒﺮﻣﺠﯿﻦ ‪ ,‬واﻟﺤﻤﺪﷲ اﻟﻠﻐﺔ ﻣﻮﺟﻮده ﺑﺄذن‬

‫>‪</p‬‬

‫>‪</div‬‬

‫>? ;)'‪<?php include('includes/sidebar.php‬‬

‫>? ;)'‪<?php include('includes/footer.php‬‬

‫>‪</div‬‬

‫>‪</body‬‬

‫>‪</html‬‬

‫ﺛﻢ ﻓﻰ اﻟﻨﮭﺎﯾﺔ ‪ ,‬ﻗﻢ ﺑﺘﻐﯿﯿﺮ اﺳﻢ ﻣﻠﻒ ‪ index.html‬اﻟﻰ ‪index.php‬‬

‫وﻣﺒﺮوك ﻋﻠﯿﻚ ﻣﻮﻗﻊ ﺧﻔﯿﻒ وﻟﺬﯾﺬ‪ ,‬ﺑﻨﻈﺎم اﻟﻘﻮاﻟﺐ اﻟﺮاﺋﻊ‬

‫ﻟﺘﺤﻤﯿﻞ ﻣﻠــــــــــــــــــــــــــﻔـــــــــــــــــﺎت اﻟﺪرس اﺿﻐـــــــــــﻂ ھــــــــــــــــــــــﻨــــــــــــــــــــــــــ ـﺎ‬

‫‪vista-design‬‬

‫‪www.advphp.com‬‬

‫اﻧﺘﮭﻰ اﻟﺠﺰء اﻻول ﻣﻦ اﻟﺪرس‬

‫اﻟﺠﺰء اﻟﺜﺎﻧﻰ‬

‫ﻋﻮده ﻣﻦ ﺟﺪﯾﺪ أﻋﻀﺎء وزوار ﻣﻮﻗﻌﻨﺎ اﻟﻜﺮام‪,‬ﻟﻘﺪ ﺗﺄﺧﺮت ﻗﻠﯿﻼ ﻓﻰ ﺗﻨﺰﯾﻞ اﻟﺪروس ﻧﻈﺮا ﻻﻧﻰ ﻛﻨﺖ أﺟﮭﺰ ﻟﮭﺬا اﻟﺪرس ﻻﻧﮫ ﻣﻦ اﻟﺪروس اﻟﻤﮭﻤﮫ‪ ,‬وﻧﻈﺮا ﻟﻜﺜﺮة‬
‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪12/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫اﻟﻄﻠﺒﺎت ﻣﻨﻜﻢ ﺑﺄن ﺗﺮوا ﻣﺜﻞ ھﺬا اﻟﻨﻮع ﻣﻦ اﻟﺸﺮوﺣﺎت ‪ ,‬ﻓﻘﺪ ﻗﺮرت أن أﺟﻌﻞ ھﺬا اﻟﺪرس ﻛﺴﻠﺴﻠﮫ ﺳﻮف ﻧﻘﻮم ﺑﺘﻄﻮﯾﺮھﺎ ﺧﻄﻮه ﺧﻄﻮه ﻣﻦ ﺑﺮﻣﺠﺔ وﺗﺼﻤﯿﻢ ﺣﺘﻰ‬
‫ﻧﺼﻞ ﻟﺘﺼﻤﯿﻢ وﺑﺮﻣﺠﺔ ﻣﻮﻗﻊ ﻣﺘﻜﺎﻣﻞ ﯾﺼﻠﺢ ﻟﻜﺎﻓﺔ اﻷﻏﺮاض‪ ,‬وﻓﻰ ھﺬا اﻟﺪرس ﺳﻮف اﻧﺘﻘﻞ ﻣﻌﻜﻢ ﻟﻠﺘﻄﻮﯾﺮ اﻟﺜﺎﻧﻰ‬
‫‪css+php‬ﻣﻦ اﻟﺪرس اﻟﺴﺎﺑﻖ ﺷﺮح ﺑﺮﻣﺠﺔ وﺗﺼﻤﯿﻢ ﻣﻮﻗﻌﻚ ﺧﻄﻮه ﺑﺨﻄﻮه ﺑﻔﻜﺮة ﻧﻈﺎم اﻟﻘﻮاﻟﺐ ب‬

‫‪ :‬وﻓﻰ ھﺬا اﻟﺘﻄﻮﯾﺮ اﻟﺜﺎﻧﻰ ﺳﻮف ﻧﻘﻮم ﺑﺎﻟﺘﺤﺴﯿﻨﺎت اﻷﺗﯿﮫ ﻟﻠﻤﻮﻗﻊ‬

‫‪:‬وﺑﻌﺪ ان ﻧﻨﮭﻰ ھﺬا اﻟﺪرس ﺳﻮف ﺗﻼﺣﻆ اﻟﻔﺮق ﻓﻰ اﻟﺘﻄﻮﯾﺮ واﺿﺤﺎ‬

‫‪:‬واﻟﯿﻜﻢ اﻟﻨﺎﺗﺞ اﻟﻨﮭﺎﺋﻰ‬

‫‪:‬اﻟﻤﻮﻗﻊ ﻗﺒﻞ اﻟﺘﻄﻮﯾﺮ اﻟﺜﺎﻧﻰ‬

‫‪:‬اﻟﻤﻮﻗﻊ ﺑﻌﺪ اﻟﺘﻄﻮﯾﺮ اﻟﺜﺎﻧﻰ‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪13/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫دﻋﻮﻧﺎ ﻧﻨﻄﻠﻖ ﺳﻮﯾﺎ ﻟﻨﺮى ﻣﺎ ﺳﻨﻘﻮم ﺑﻌﻤﻠﮫ ان ﺷﺎء ﷲ‬

‫‪:‬أوﻻ ﻓﮭﺮس اﻟﺪرس‬

‫‪-1‬ﺷﺮح ﻋﻤﻞ ‪ background‬ﻟﻠﺼﻔﺤﺔ‬

‫‪-2‬ﺷﺮح ﻋﻤﻞ ‪ background‬ﻟﻠﻤﻘﺎﻻت داﺧﻞ ‪wrapper‬‬
‫‪-3‬ﺷﺮح اﻋﺎدة ﺗﻮزﯾﻊ اﻟﮭﯿﺪر وﻋﻤﻞ ﺗﺼﻤﯿﻢ ﻟﮫ‬
‫‪-4‬ﺷﺮح ﻋﻤﻞ ﻧﺎف ﺑﺎر ب‪ css‬ﺑﺸﻜﻞ ﺟﺬاب‬
‫‪-5‬ﺷﺮح ﻋﻤﻞ ﻗﺎﺋﻤﺔ رﺋﯿﺴﯿﺔ ﺟﺎﻧﺒﯿﺔ ب ‪ css‬ﺑﺸﻜﻞ ﺟﺬاب‬
‫‪-6‬ﺷﺮح طﺮﯾﻘﺔ ﻋﺮض اﻟﻤﻘﺎﻻت وﺟﻠﺒﮭﺎ ﻣﻦ ﺻﻔﺤﺎﺗﮭﺎ ﺑﺪون ﺗﺤﻤﯿﻞ اﻟﺼﻔﺤﺔ ﻣﺮة أﺧﺮى ب ‪jquery‬‬
‫‪-7‬اﻧﮭﺎء اﻟﺸﻜﻞ اﻟﻨﮭﺎﺋﻰ ﻟﻜﻮد ‪ php‬اﺳﺘﻌﺪاد ﻟﻠﺘﻄﻮﯾﺮ اﻟﺜﺎﻟﺚ ﻟﻌﻤﻞ ﻟﻮﺣﺔ ﺗﺤﻜﻢ ﺑﺎﻟﻤﻘﺎﻻت‬

‫اوﻻ‪ :‬ﺷﺮح ﻋﻤﻞ ‪ background‬ﻟﻠﺼﻔﺤﺔ ‪:‬‬

‫‪-‬اﻓﺘﺢ ﻣﻠﻒ ‪ style.css‬وﻓﻰ ﻛﻮد ‪ body‬ﺳﻮف ﻧﻘﻮم ﺑﻌﻤﻞ ‪background‬‬

‫وھﺬا ھﻮ ﻛﻮدھﺎ‪:‬‬

‫رﻣﺰ ‪:Code‬‬

‫; )‪background-image:url(images/back.jpg‬‬

‫واﻟﺼﻮره اﻟﻤﺴﺘﺨﺪﻣﮫ ﻛﺨﻠﻔﯿﮫ ﺳﻮف ﺗﻜﻮن‪:‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪14/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫ﺛﺎﻧﯿﺎ‪:‬ﺷﺮح ﻋﻤﻞ ﺧﻠﻔﯿﺔ ﻟﻠﻤﻘﺎﻻت داﺧﻞ ‪wrapper‬‬

‫‪-‬ﻓﻰ ‪ #wrapper‬ﺳﻮف ﻧﻘﻮم ﺑﺎﺿﺎﻓﺔ ﺧﻠﻔﯿﺔ ﻛﺎﻻﺗﻰ‪:‬‬

‫رﻣﺰ ‪:Code‬‬

‫;)‪background-image:url(images/bg.jpg‬‬

‫وﺳﻮف ﻧﺴﺘﺨﺪم اﻟﺼﻮرة اﻷﺗﯿﮫ‪:‬‬

‫ﺛﺎﻟﺜﺎ‪:‬ﺷﺮح اﻋﺎدة ﺗﻮزﯾﻊ اﻟﮭﯿﺪر وﻋﻤﻞ ﺗﺼﻤﯿﻢ ﻟﮫ‪:‬‬

‫ﻓﻰ ‪ #header‬ﺳﻮف ﻧﻘﻮم ﺑﻌﻤﻞ ﺧﻠﻔﯿﺔ وھﺬا ھﻮ ﻛﻮدھﺎ‪:‬‬

‫رﻣﺰ ‪:Code‬‬

‫;)‪background-image:url(images/header.jpg‬‬

‫واﻟﺼﻮرة اﻟﻤﺴﺘﺨﺪﻣﮫ ھﻰ‪:‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪15/45‬‬
8/18/2016 php ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف‬

‫ﺷﻮﻓﺘﻮا اﻟﻤﻮﺿﻮع ﻟﺤﺪ اﻷن ﺑﺴﯿﻂ‬

..............‫ﻧﺒﺪأ ﻧﺪﺧﻞ ﻓﻰ اﻷﺻﻌﺐ ﻗﻠﯿﻼ‬

:‫ ﺑﺸﻜﻞ ﺟﺬاب‬css‫ ﺷﺮح ﻋﻤﻞ ﻧﺎف ﺑﺎر ب‬:‫راﺑﻌﺎ‬

‫ﺳﻮف ﻧﻘﻮم ﺑﺘﻌﺪﯾﻞ ﻛﻮد اﻟﻨﺎف ﺑﺎر ﻓﻰ اﻟﺪرس اﻟﺴﺎﺑﻖ ﺑﺤﯿﺚ ﯾﻜﻮن طﺮﯾﻘﺔ اﻟﻌﺮض ﻟﻠﻨﺎف ﺑﺎر‬-1
li ‫ﻛﻠﺴﺖ‬
nav.php ‫وھﺬا ھﻮ اﻟﻜﻮد ﻓﻰ ﺻﻔﺤﺔ‬

<ul id="nav">
:Code ‫رﻣﺰ‬
<li><a href="index.php">‫<اﻟﺮﺋﯿﺴﯿﺔ‬/a></li>

<li><a href="pages/portfolio.html">‫<اﻟﻤﻨﺘــﺪى‬/a></li>
<li><a href="pages/about.html">‫<اﻟــﺼــﻮر‬/a></li>
<li><a href="pages/contact.html">‫<اﻻﺳﺘﻀﺎﻓﺔ‬/a></li>

<li><a href="pages/terms.html">‫<اﻟﺮﯾﺴﻠﺮات‬/a></li>
<li><a href="pages/about.html">‫<اﻟﺴﯿﺮﻓﺮات‬/a></li>
<li><a href="pages/about.html">‫<اﻟﺒﺮﻣﺠﺔ‬/a></li>

<li><a href="#">‫<اﺗـﺼـﻞ ﺑـﻨﺎ‬/a></li>

</ul>

:‫ﻧﺮﯾﺪ ان ﻧﻀﯿﻒ اﻟﺘﺄﺛﯿﺮ ﻋﻨﺪ ﻣﺮور اﻟﻤﺎوس‬-2

ul#nav{
margin:0; ‫ ﺟﺎھﺰ‬css ‫ﻧﻈﺮا ﻟﻄﻮل اﻟﺪرس ﺳﻮف اﺿﻊ ﻟﻜﻢ ﻛﻮد‬
padding:0;
list-style-type:none;
width:auto; :Code ‫رﻣﺰ‬
position:relative;
display:block;
height:40px;
text-transform:uppercase;
font-size:13px;
background:transparent url("images/black.jpg") repeat-x top left;
font-family:tahoma,Arial,Verdana,sans-serif;
}
ul#nav li{
display:block;
float:right;
margin:0;
pading:0;
border-right:1px solid #ffffff;
}
ul#nav li a{
display:block;
float:left;
color:#ffffff;
text-decoration:none;
padding:12px 20px 0 20px;
height:24px;
height:40px;
}
ul#nav li a:hover{
background:transparent url("images/blue.jpg") repeat-x top left;
}

:‫وﺑﺎﻟﻨﺴﺒﺔ ﻟﺨﻠﻔﯿﺔ أزرار اﻟﻨﺎف ﺑﺎر ﺳﻮف ﻧﺴﺘﺨﺪم ﺻﻮرﺗﯿﻦ‬

http://www.advphp.com/tuts/fullarticles/ 16/45
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫ﺻﻮرة ‪ black.jpg‬اﻟﺨﺎﺻﺔ ﺑﺨﻠﻔﯿﺔ اﻟﺰر‪ ,‬وﺻﻮرة ‪ blue.jpg‬اﻟﺨﺎﺻﺔ ﺑﺘﻐﯿﺮ ﻟﻮن اﻟﺰر ﺑﻤﺮور اﻟﻤﺎوس ﻋﻠﯿﮫ‬
‫وھﻤﺎ ﻣﻮﺟﻮدﯾﻦ ﻓﻰ ﻣﺠﻠﺪ اﻟﺼﻮر ‪images‬‬

‫اﻻن ﺷﻜﻞ اﻟﻤﻮﻗﻊ ﻟﺤﯿﻦ ھﺬه اﻟﻤﺮﺣﻠﺔ ﺳﻮف ﯾﺼﺒﺢ ﺷﻜﻠﮫ ﻛﺎﻷﺗﻰ‪:‬‬

‫>"‪<div class="outer" id="sidebar‬‬

‫>"‪<div id="menu‬‬
‫>‪<ul‬‬
‫"‪<li><a style="color:#02aaf8‬‬
‫اﻟﺮﺋــﯿﺴﯿــﮫ>"‪ css href="#‬ﺑﺸﻜﻞ ﺟﺬاب‪:‬‬ ‫>‪</a></li‬اﻟﻘﺎﺋــﻤــﮫ‬
‫ﺧﺎﻣﺴﺎ‪-‬ﺷﺮح ﻋﻤﻞ ﻗﺎﺋﻤﺔ رﺋﯿﺴﯿﺔ ﺟﺎﻧﺒﯿﺔ ب‬
‫>‪</a></li‬اﻟﺮﺋﯿﺴﯿﺔ>"‪<li><a href="#‬‬
‫اﻓﺘﺢ ﻣﻠﻒ ‪ sidebar.php‬وﺳﻮف ﻧﻘﻮم ﺑﺘﻌﺪﯾﻞ ﻛﻮده ﻣﺮه أﺧﺮى ﻟﯿﺼﺒﺢ ﻛﺎﻻﺗﻰ‪:‬‬
‫>‪</a></li‬اﻟﻤﻨﺘـﺪى>"‪<li><a href="#‬‬
‫>‪</a></li‬اﻻﺳﺘﻔـﺴﺎرات>"‪<li><a href="#‬‬
‫رﻣﺰ ‪:Code‬‬
‫>‪</a></li‬اﻟﻤﻜﺘﺒـﺔ>"‪<li><a href="#‬‬
‫>‪</a></li‬اﻟﺼـﻮر>"‪<li><a href="#‬‬

‫>‪</a></li‬اﻟﺨﺪﻣـــﺎت اﻟﺨﺎرﺟﯿﮫ>"‪<li><a style="color:#02aaf8" href="#‬‬

‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬

‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬

‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬
‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬

‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬

‫>‪</a></li‬اﻟﺪﻋﻢ اﻟﻔــﻨﻰ>"‪<li><a style="color:#02aaf8" href="#‬‬

‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬

‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬
‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬

‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬

‫>‪</a></li‬أﺿﻒ ﻟﻨﻚ>"‪<li><a href="#‬‬
‫>‪</ul‬‬

‫>‪</div‬‬
‫>‪</div‬‬

‫وﺳﻮف ﻧﻘﻮم ﺑﺄﺿﺎﻓﺔ ﺗﺄﺛﯿﺮ ‪ css‬ﻋﻠﯿﮫ ﺑﺎﺳﺘﺨﺪام اﻟﻜﻮد اﻻﺗﻰ‪:‬‬

‫رﻣﺰ ‪:Code‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪17/45‬‬
8/18/2016 php ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف‬
voice-family: inherit;
height: 24px;
text-decoration: none;
font-weight:normal;
}

#menu li a:link, #menu li a:visited {

color: #FFFFFF;
display: block;
background: url(images/v6.gif);
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}

#menu li a:hover {
color: #666666;
background: url(images/v6.gif) 0 -32px;
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}

#menu li a:active {
color: #666666;
background: url(images/v6.gif) 0 -64px;
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}

v6.gif ‫وﺳﻮف ﻧﺴﺘﺨﺪم ﺧﻠﻔﯿﺔ اﻷزرار اﻟﺼﻮرة‬

:‫ﺑﺤﯿﺚ ﺑﻌﺪ ھﺬا اﻟﺘﻌﺪﯾﻞ ﺳﻮف ﯾﺼﺒﺢ ﺷﻜﻞ اﻟﻘﺎﺋﻤﺔ ﻛﺎﻷﺗﻰ‬

jquery ‫ﺷﺮح طﺮﯾﻘﺔ ﻋﺮض اﻟﻤﻘﺎﻻت وﺟﻠﺒﮭﺎ ﻣﻦ ﺻﻔﺤﺎﺗﮭﺎ ﺑﺪون ﺗﺤﻤﯿﻞ اﻟﺼﻔﺤﺔ ﻣﺮة أﺧﺮى ب‬-‫ﺳﺎدﺳﺎ‬

‫ ﻻﻧﮭﺎ راﺋﻌﮫ ﺑﺼﺮاﺣﮫ وﺗﺴﺘﺤﻖ اﻟﺘﻌﺐ‬jquery‫ وأﺣﺒﺒﺖ أن أﺷﺮﺣﮫ ﺑﺎﺳﺘﻔﺎﺿﮫ ﻻن أﺣﺐ ﻓﻦ ال‬, ‫طﺒﻌﺎ ھﺬا ﺗﻘﺮﯾﺒﺎ ھﻮ أھﻢ ﻣﺎ ﻓﻰ اﻟﻤﻮﺿﻮع ﻣﻦ ﺗﺤﺴﯿﻦ‬

http://www.advphp.com/tuts/fullarticles/ 18/45
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫أوﻻ‪ :‬ﻣﻼﺣﻈﮫ ھﺎﻣﮫ ﺟﺪا ﻗﺒﻞ اﻟﺒﺪء‪:‬‬

‫ﻧﻈﺮا ﻻن ‪ jquery‬ﻟﮭﺎ ﺑﻌﺾ اﻟﻤﺸﺎﻛﻞ ﻣﻊ اﻟﻠﻐﺔ اﻟﻌﺮﺑﯿﺔ‪ ,‬ﺧﺼﻮﺻﺎ ﻓﻰ طﺮﯾﻘﺔ اﻟﺘﺤﻤﯿﻞ ﻟﻠﺼﻔﺤﺎت ﺑﻮاﺳﻄﺘﮭﺎ وﻋﺮﺿﮭﺎ ﻟﻠﻐﺔ اﻟﻌﺮﺑﯿﺔ‪ ,‬ﻟﺬﻟﻚ ﺳﻮف أﻗﺪم ﻟﻜﻢ ﺣﻼ‬
‫ﻗﺎطﻌﺎ ﺗﻘﺪر ﺗﺴﺘﺨﺪﻣﮫ ﻓﻰ اى ﺗﻌﺎﻣﻞ ﻟﻚ ﻣﻊ ال‪juqery‬‬
‫او اى ﻣﻠﻒ اﺧﺮ ﻣﺴﻮﯾﻠﻚ ﻣﺸﻜﻠﺔ ﻓﻰ اﻟﺘﺮﻣﯿﺰ‬

‫‪-‬اوﻻ ﺳﻮف ﻧﻘﻮم ﺑﺄﺳﺘﺨﺪام ‪++notepad‬‬

‫ﯾﻤﻜﻨﻚ ﺗﺤﻤﯿﻠﮭﺎ ﻣﻦ اﻟﺮاﺑﻂ اﻻﺗﻰ اﺿﻐﻂ ھــــــــﻨـــــــﺎ‬

‫اى ﺻﻔﺤﺔ ﺗﺘﻌﺎﻣﻞ ﺑﮭﺎ ‪ ,‬اذا واﺟﮭﺘﻚ ﻣﺸﻜﻠﺔ ﺑﺎﻟﺘﺮﻣﯿﺰ وظﮭﻮر اﻟﺤﺮوف ﺑﺄﺷﻜﺎل ﻏﺮﯾﺒﮫ ﻋﻠﯿﻚ ﺑﻌﻤﻞ اﻟﺨﻄﻮات اﻻﺗﯿﺔ ‪:‬‬

‫ﺳﻮف ﻧﺴﺘﺨﺪم ﺗﻐﯿﯿﺮ ال‪ encoding‬ﻟﻜﻞ اﻟﺼﻔﺤﺔ ب ‪ utf-8‬ﺛﻢ ﻧﻘﻮم ﺑﺤﻔﻆ اﻟﺼﻔﺤﺔ ‪:‬‬

‫ﻓﻘﻂ ‪ ,‬وﺑﮭﯿﻚ ﺗﺘﺨﻠﺺ ﻣﻦ ﻣﺸﺎﻛﻞ اﻟﺘﺮﻣﯿﺰ ‪.............‬‬

‫ﻧﺮﺟﻮ ﻟﻤﻮﺿﻮﻋﻨﺎ ﺑﺨﺼﻮص ﺷﺮح ﺗﺤﻤﯿﻞ وﻋﺮض اﻟﻤﻘﺎﻻت ﺑﺪون ﺗﺤﻤﯿﻞ اﻟﺼﻔﺤﺔ‬

‫اوﻷ‪ :‬ارﺟﻊ ﻟﻠﻤﺜﺎل اﻟﻠﻰ طﻮرﻧﺎه وﺷﻮف طﺮﯾﻘﺔ ﻋﺮض اﻟﻤﻘﺎﻻت‪ ,‬ﻋﻦ طﺮﯾﻖ اﻟﻀﻐﻂ ﻋﻠﻰ زر‬
‫ﻣﻦ أزرار اﻟﻨﺎف ﺑﺎر ﺣﺘﻰ ﺗﻔﮭﻢ اﻟﻘﺼﺪ‪........‬‬

‫ﺛﺎﻧﯿﺎ‪ :‬ﻻﺑﺪ ان ﻧﻔﮭﻢ اﻟﻔﻜﺮة ﻟﮭﺬه اﻟﻄﺮﯾﻘﺔ اﻟﺮاﺋﻌﮫ‪ ,‬ﻟﺬﻟﻚ أﻧﻈﺮ ﻟﮭﺬه اﻟﺼﻮرة ﻟﻨﻔﮭﻢ اﻟﻔﻜﺮة ﺳﻮﯾﺎ‪.‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪19/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫ھﻞ ﻓﮭﻤﺖ ﻓﻜﺮة اﻟﺼﻮرة؟‪ ,‬ﻣﻮ ﻣﺸﻜﻠﺔ ﻧﻜﻤﻞ اﻟﺸﺮح وراح ﺗﻔﮭﻢ ﻓﻰ اﻻﺧﺮ ان ﺷﺎء ﷲ‬

‫‪-1‬اوﻻ ارﺟﻊ ﻟﻤﻠﻒ ‪ nav.php‬وﺷﻮف اﻧﻨﺎ اﻋﻄﯿﻨﺎه ﺷﻜﻞ اﻟﻠﺴﺖ ‪li‬‬

‫ﻛﺎﻻﺗﻰ ﻛﻤﺜﺎل‪:‬‬

‫رﻣﺰ ‪:Code‬‬

‫>"‪<ul id="nav‬‬

‫>‪</a> </li‬اﻟﺮﺋﯿﺴﯿﺔ>"‪<li><a href="#‬‬

‫>‪</ul‬‬

‫‪-2‬ﺛﺎﻧﯿﺎ ﻧﺴﺘﺨﺪم ﻣﻠﻒ ‪ js.js‬ﻟﻨﻀﻔﻰ ﺗﺄﺛﯿﺮ ال‪ jquery‬ﻓﻰ ﻋﺮض اﻟﻤﻘﺎﻻت ‪:‬‬

‫‪-‬ﻓﻰ ﻣﻠﻒ ‪ index.php‬راح ﻧﺴﺘﺪﻋﻰ ﻣﻠﻒ اﻟﻤﻜﺘﺒﺔ ‪+ jquery‬ﻣﻠﻒ ‪js.js‬‬

‫رﻣﺰ ‪:Code‬‬

‫>‪<script type="text/javascript" src="jquery.js"></script‬‬

‫>‪<script type="text/javascript" src="js.js"></script‬‬

‫‪-‬دﻋﻮﻧﺎ ﻧﺸﺮح ﻣﻠﻒ ‪js.js‬‬

‫ﻓﻜﺮﺗﮫ ﺑﺴﯿﻄﮫ وھﻰ اﻧﻨﺎ ﺳﻨﻘﻮم ﺑﻌﻤﻞ اﻟﺘﺎﺛﯿﺮ ﻋﻦ طﺮﯾﻖ اﺣﺪاث ﺗﻐﯿﯿﺮات ﻋﻠﻰ اﻟﺰر‬
‫ﺑﻌﺪ ان ﻗﻤﻨﺎ ﺑﻈﺒﻂ ﻛﻮد ‪ css‬واﻟﺨﻄﻮات ﻛﺎﻷﺗﻰ‪:‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪20/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫اوﻻ‪ :‬ﺗﺤﻤﯿﻞ اﻟﻤﻘﺎل ﻓﻘﻂ ﻣﻦ اﻟﺼﻔﺤﺔ واﻟﺬى ھﻮ ﻣﺪرج داﺧﻞ ‪ id‬اﺳﻤﮫ ‪#content‬‬
‫)راﺟﻊ ﻛﻮد ‪ , ( index.php‬ﺑﺤﯿﺚ ﯾﻘﻮم اﻟﻜﻮد ﺑﺠﻠﺐ ﻣﺴﺎر اﻟﺼﻔﺤﺔ‬

‫رﻣﺰ ‪:Code‬‬

‫;'‪var toLoad = $(this).attr('href')+' #content‬‬

‫ﺛﺎﻧﯿﺎ‪ :‬ﺳﻨﻘﻮم ﺑﺄﺧﻔﺎء اﻟﻤﻘﺎل اﻟﻈﺎھﺮ ﻟﻚ ﺑﻌﺪ ان ﯾﺘﻢ ﺿﻐﻂ اﻟﺰر ﻟﯿﺘﻢ ﺟﻠﺐ اﻟﻤﻘﺎل ﻣﻦ اﻟﺼﻔﺤﺔ اﻟﺬى ﺿﻐﻄﺖ ﺑﮭﺎ زرھﺎ‬

‫رﻣﺰ ‪:Code‬‬

‫;)‪$('#content').hide('fast',loadContent‬‬

‫ﺛﺎﻟﺜﺎ‪ :‬ﺳﻮف ﻧﺴﺘﺨﺪم ﺗﺄﺛﯿﺮ ﺟﻤﯿﻞ وھﻮ ﻋﺮض ﺻﻮرة ﺗﺤﻤﯿﻞ اﻟﺼﻔﺤﺔ ﻟﺤﯿﻦ ﺗﻈﮭﺮ‬
‫اوﻻ‪ :‬ﻓﻰ ﻛﻮد ‪ css‬ﺳﻮف ﻧﺴﺘﺨﺪم اﻟﻜﻮد اﻷﺗﻰ‪:‬‬

‫{ ‪#load‬‬ ‫رﻣﺰ ‪:Code‬‬

‫;‪display: none‬‬
‫;‪position: absolute‬‬
‫;‪left: 30px‬‬

‫‪/*distance from top edge of image till top edge of wrapper div */‬‬
‫;‪top: 10px‬‬
‫‪/*right:30px; distance from rt edge of image till rt border of wrapper div */‬‬
‫;)‪background: url(images/ajax-loader.gif‬‬
‫;‪width: 54px‬‬
‫;‪height: 55px‬‬
‫;‪text-indent: -9999em‬‬
‫}‬

‫طﺒﻌﺎ اﻧﺎ ﻛﺎﺗﺐ اﻟﻜﻼم ﺑﺎﻻﻧﺠﻠﺶ ﺣﺘﻰ ﻻ أﻧﺴﻰ ‪ ,‬وھﺬا ﻛﺘﺎﺑﺘﻰ وﻟﯿﺲ ﻧﻘﻼ ﻣﻦ أﺣﺪ‬

‫واﻟﺼﻮرة اﻟﻤﺴﺘﺨﺪﻣﺔ‬

‫اﻟﺤﯿﻦ ﻧﺮﺟﻊ ﻟﻤﻠﻒ ‪ js.js‬ﻣﺮه اﺧﺮى وﻧﻜﻤﻞ ﻛﺘﺎﺑﺔ اﻟﻜﻮد‪:‬‬

‫ﺑﻌﺪ ﻋﺮض اﻟﺼﻮرة اﻟﺨﺎﺻﺔ ﺑﺘﺤﻤﯿﻞ اﻟﺼﻔﺤﺔ ‪ ,‬ووﻗﺖ ﯾﺘﻢ ﺗﺤﻤﯿﻠﮭﺎ ﺳﻮف ﻧﻘﻮم ﺑﺄﺧﻔﺎءھﺎ‬

‫رﻣﺰ ‪:Code‬‬

‫;)(‪$('#load').remove‬‬

‫وﺳﻮف ﻧﻘﻮم ﺑﺄرﻓﺎق ھﺬه اﻟﺼﻮرة ﺑﺎﺳﺘﺨﺪام اﻟﻜﻮد اﻻﺗﻰ‪:‬‬

‫رﻣﺰ ‪:Code‬‬

‫;)'>‪$('#wrapper').append('<span id="load">LOADING...</span‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪21/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫راﺑﻌﺎ‪ :‬ﺳﻨﻘﻮم ﺑﻌﻤﻞ اﺧﻔﺎء ﺗﺪرﯾﺠﻰ ﻟﺤﯿﻦ ﺗﺤﻤﻞ اﻟﺼﻔﺤﺔ اﻻﺧﺮى ﻛﺎﻻﺗﻰ‪:‬‬

‫رﻣﺰ ‪:Code‬‬

‫;)'‪$('#load').fadeIn('normal‬‬

‫ﺑﺎﻗﻰ اﻟﻜﻮد ﺑﺼﺮاﺣﺔ ﺗﻘﺪر ﺗﻀﻌﮫ ﻣﺒﺎﺷﺮة‪ ,‬ﻻﻧﻰ أﺧﺬت اﻟﻔﻜﺮة ﻣﻦ أﺣﺪ اﻷﺳﻜﺮﺑﺘﺎت وطﺒﻘﺘﮭﺎ ﻋﻠﻰ ھﺬا اﻟﺪرس‬
‫وﺣﺒﯿﺖ أﺷﺮﺣﮭﺎ ﺑﻌﺪ ﻓﮭﻤﮭﺎ وﺗﻄﺒﯿﻘﮭﺎ ﻋﻠﻰ درﺳﻨﺎ و اﻟﺤﻤﺪ‬

‫وﺗﻘﺪر ﺗﺸﻮف اﻟﺘﺄﺛﯿﺮ اﻟﻠﻰ أﻗﺼﺪه ﻣﻦ ﺧﻼل ھﺬه اﻟﺼﻮرة‪:‬‬

‫ﺑﮭﯿﻚ اﻧﺘﮭﺖ ھﺬه اﻟﺠﺰﺋﯿﮫ ‪.......‬‬

‫ﺳﺎﺑﻌﺎ‪ :‬اﻧﮭﺎء اﻟﺸﻜﻞ اﻟﻨﮭﺎﺋﻰ ﻟﻜﻮد ‪ php‬اﺳﺘﻌﺪاد ﻟﻠﺘﻄﻮﯾﺮ اﻟﺜﺎﻟﺚ ﻟﻌﻤﻞ ﻟﻮﺣﺔ ﺗﺤﻜﻢ ﺑﺎﻟﻤﻘﺎﻻت‬

‫أرﯾﺪ ان أﺑﺸﺮﻛﻢ ﺑﺄﻧﻨﺎ ﺑﻌﺪ أن وﺻﻠﻨﺎ ﻟﮭﺬه اﻟﻤﺮﺣﻠﺔ ‪ ,‬ﻓﺒﮭﯿﻚ أﺻﺒﺤﺖ ﻣﻠﻔﺎت اﻟﻤﻮﻗﻊ ﻣﮭﯿﺌﺔ ﻻن ﻧﺴﺘﺨﺪم اﻻواﻣﺮ اﻟﺒﺮﻣﺠﯿﺔ ب ‪ ,php‬وھﺬا ﻣﺎ ﺳﻮف ﯾﺘﻢ ﻓﻌﻠﮫ ﻓﻰ‬
‫اﻟﺘﻄﻮﯾﺮ اﻟﺜﺎﻟﺚ ان ﺷﺎء ﷲ‬

‫ﺗﺮﻗﺒﻮا اﻟﺘﻄﻮﯾﺮ اﻟﺜﺎﻟﺚ ﻟﻠﺪرس‪ ,‬وﺳﻮف ﻧﻘﻮم ﻓﯿﮫ ﺑﺸﺮح ﻋﻤﻞ ﻟﻮﺣﺔ ﺗﺤﻜﻢ ﻣﺒﺴﻄﺔ ﻟﻠﺘﺤﻜﻢ ﺑﻌﺮض اﻟﻤﻘﺎﻻت‬

‫ﺑﺎﻟﺘﻮﻓﯿﻖ‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪22/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫ﻟﺘﺤﻤﯿﻞ اﻟﺘﻄﻮﯾﺮ اﻟﺜﺎﻧﻰ اﺿﻐــــﻂ ھــــﻨﺎ‬

‫أﺧﻮﻛﻢ ‪vista-design‬‬

‫اﻟﺠﺰء اﻟﺜﺎﻟﺚ‬
‫ﺑﺴﻢ ﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ‬
‫أھﻼ ﺑﺰوار ﻣﻮﻗﻌﻨﺎ اﻟﻜﺮام‪ ,‬وﺑﻌﺪ ﻏﯿﺒﮫ طﻮﯾﻠﮫ واﻻﻧﻘﻄﺎع ﻋﻦ دروس اﻟﺒﺮﻣﺠﺔ ‪ ,‬ﻓﮭﺎ أﻧﺎ أﻋﻮد ﻣﻌﻜﻢ ﻣﻦ ﺟﺪﯾﺪ‪ ,‬وﺳﺄﺳﺘﻜﻤﻞ ﻣﻌﻜﻢ دروس اﻟﺒﺮﻣﺠﺔ واﻟﺘﻰ ﺳﺄﺣﺎول‬
‫ﺟﺎھﺪا ﻓﻰ ھﺬه اﻟﻔﺘﺮة أن أﻗﺪم ﻟﻜﻢ اﻟﺪروس اﻟﻤﮭﻤﮫ واﻟﺘﻰ ﺳﺘﻔﯿﺪ ﻛﻞ ﻣﻦ ﯾﺮﯾﺪ‬
‫اﻟﺨﻮض ﻓﻰ اﻟﺒﺮﻣﺠﺔ ‪ ,‬واﻧﺎ ﻗﺮرت ان اﻧﺠﺰ ﻓﻰ ھﺬه اﻟﻤﺮﺣﻠﺔ ﺷﯿﺌﺎن وھﻤﺎ‪,‬‬

‫‪-1‬ﺳﺄﺳﺘﻜﻤﻞ ﻣﻌﻜﻢ دروس ﺗﻄﻮﯾﺮ وﺑﺮﻣﺠﺔ ﻣﻮﻗﻊ ب ‪ php+css‬اﻟﻰ ان ﻧﺼﻞ ﻟﺒﺮﻣﺠﺔ اﺳﻜﺮﺑﺖ ﺑﻠﻮﺣﺔ ﺗﺤﻜﻢ ﻣﺘﻜﺎﻣﻞ ان ﺷﺎء ﷲ‬

‫‪-2‬ﺳﺄﺑﺪأ ﻓﻰ ﺷﺮح اﻟﻔﺮﯾﻢ ورك اﻟﺨﺎص ب ‪ php‬وھﻮ ال‪codeigniter‬‬

‫وﺧﻠﻮﻧﺎ ﻓﻰ ھﺬا اﻟﺪرس ان أﺑﺪ ﻧﺴﺘﻜﻤﻞ ﻣﻌﻜﻢ ﻓﻰ ھﺬا اﻟﺪرس‬

‫اﻟﺘﻄﻮﯾﺮ اﻟﺜﺎﻟﺚ ﻟﺪرس ﺑﺮﻣﺠﺔ وﺗﺼﻤﯿﻢ ﻣﻮﻗﻊ ب ‪php+css‬‬

‫ودﻋﻮﻧﺎ ﻧﺘﻌﺮف ﻋﻠﻰ ﻓﮭﺮس ھﺬا اﻟﺪرس وﻣﺎ ﺳﯿﺘﻢ اﻧﺠﺎزه ﺑﺎﻟﻨﻈﺮ‬
‫ﻟﮭﺬه اﻟﺼﻮره‪.......‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪23/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫وﺧﻠﻮﻧﺎ ﻧﺸﻮف ﺻﻮره ﻟﻠﻨﺎﺗﺞ اﻟﻨﮭﺎﺋﻰ ﻟﻤﻠﻔﺎت اﻟﻤﻮﻗﻊ ﺑﻌﺪ ﺑﺮﻣﺠﺘﮭﺎ ﻛﻠﮭﺎ‪..‬‬

‫ﺗﻤﺎم ‪ ,‬ﻧﺒﺪأ ﻋﻠﻰ ﺑﺮﻛﺔ ﷲ ‪.....‬‬

‫اﻟﺠﺰء اﻻول‪:‬ﺷﺮح ﻧﻈﺎم ﺗﺴﺠﯿﻞ اﻟﺪﺧﻮل ﻟﻠﻮﺣﺔ اﻟﺘﺤﻜﻢ‬

‫اﻧﻈﺮ ﻟﻠﺼﻮره ﻟﻨﻌﺮف ﻣﺘﻄﻠﺒﺎت ﺗﻨﻔﯿﺬ ھﺬه اﻟﺨﻄﻮه‪...‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪24/45‬‬
8/18/2016 php ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف‬

‫اﻧﺸﺎء ﻗﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت وﺟﺪول اﻟﻌﻀﻮﯾﺎت‬-1

final3 ‫ ﺛﻢ ﻗﻢ ﺑﻌﻤﻞ ﻗﺎﻋﺪة ﺑﯿﺎﻧﺎت ﺑﺄﺳﻢ‬, phpmyadmin ‫اذھﺐ ﻟﻞ‬-

vista- ‫ وراح ﻧﻀﯿﻒ ﻋﻀﻮﯾﺔ اﻻدﻣﻦ وراح ﻧﺴﻤﯿﮭﺎ ﻛﯿﻮزر وھﻮ‬members ‫ ﻟﺘﻨﻔﯿﺬ أﻣﺮ ﻋﻤﻞ اﻟﺠﺪول اﻟﻠﻰ راح ﯾﻜﻮن اﺳﻤﮫ‬sql ‫ﺛﻢ ﻗﻢ ﺑﺎﻟﺬھﺎب ﻣﻦ ﻓﻮق ﻻﻣﺮ‬-
1234 ‫ وﺑﺎﺳﻮرد‬design

:Code ‫رﻣﺰ‬
CREATE TABLE `members` (
`id` int(4) NOT NULL auto_increment,
`username` varchar(65) NOT NULL default '',
`password` varchar(65) NOT NULL default '',
PRIMARY KEY (`id`)
) TYPE=MyISAM AUTO_INCREMENT=2 ;

--
-- Dumping data for table `members`
--

INSERT INTO `members` VALUES (1, 'vista-design', '1234');

http://www.advphp.com/tuts/fullarticles/ 25/45
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫ﻣﻼﺣﻈﮫ‪ :‬أرﺟﻮ ان ﯾﺘﻢ ﺗﺠﺎھﻞ اى ﺷﻰء ﯾﺘﻌﻠﻖ ﺑﺴﯿﻜﯿﻮرﺗﻰ اﻻواﻣﺮ اﻟﺘﻰ ﺳﻨﻨﻔﺬھﺎ ﺳﻮﯾﺎ‪ ,‬ﻓﺎﻟﺪرس اﻟﮭﺪف ﻣﻨﮫ ھﻮ ﺗﻌﻠﯿﻤﻚ ووﺿﻌﻚ ﻋﻠﻰ اول اﻟﻄﺮﯾﻖ ‪ ,‬ﻟﺬﻟﻚ ﻗﺪ ﯾﺄﺗﻰ‬
‫أﺣﺪ ﻣﺜﻼ وﯾﻌﻠﻖ ﻋﻠﻰ ﻧﻘﻄﺔ اﻟﺤﻤﺎﯾﺔ وﻋﻠﻰ ﺳﺒﯿﻞ اﻟﻤﺜﺎل ذﻛﺮ ان اﻟﺒﺎﺳﻮرد ﻓﻰ ﻗﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت ﻏﯿﺮ ﻣﺸﻔﺮ‪ ,‬ﻓﺄﻧﺎ ﺣﺒﯿﺖ أﺿﻊ ھﺬه اﻟﺘﻨﺒﯿﮫ‬
‫ﻻﺑﯿﻦ ﻟﻜﻢ اﻟﻐﺮض ﻣﻦ ھﺬا اﻟﺪرس ‪....‬‬

‫ﻧﻜﻤﻞ‪.......‬‬

‫‪-2‬اﻧﺸﺎء وﺑﺮﻣﺠﺔ ﻣﻠﻔﺎت ﻧﻈﺎم ﺗﺴﺠﯿﻞ اﻟﺪﺧﻮل ﻟﻠﻮﺣﺔ اﻟﺘﺤﻜﻢ‬

‫ﻛﻤﺎ رأﯾﻨﺎ ﻓﻰ اﻟﻤﻠﻔﺎت اﻟﻤﻄﻠﻮﺑﮫ ﻟﻨﻈﺎم ﺗﺴﺠﯿﻞ اﻟﺪﺧﻮل ﺳﻮف ﻧﻘﻮم ﺑﺒﺮﻣﺠﺔ ﻛﻞ ﻣﻠﻒ ﺧﻄﻮه ﺧﻄﻮه ‪....‬‬

‫‪-1‬ﺑﺮﻣﺠﺔ ﻣﻠﻒ ‪ login.php‬اﻟﺨﺎص ﺑﻤﺮﺑﻊ ﺗﺴﺠﯿﻞ اﻟﺪﺧﻮل‬

‫>‪<table‬‬
‫>‪<tr‬‬ ‫وھﻮ ﺳﯿﻜﻮن ﻋﺒﺎرة ﻋﻦ ﺟﺪول ﺑﺪاﺧﻠﮫ ﻓﻮرم ﺗﺴﺠﯿﻞ اﻟﺪﺧﻮل‬
‫>‪<form‬‬
‫>‪<td‬‬
‫وﻛﮭﯿﻜﻞ ﺑﺮﻣﺠﻰ ﻟﻜﻮد ‪ ,html‬ﺳﻮف ﯾﻜﻮن اﻟﻜﻮد اﻟﺒﺪاﺋﻰ ھﻜﺬا‬
‫>‪<table‬‬
‫رﻣﺰ ‪:Code‬‬
‫>‪<tr‬‬
‫>‪<td></td‬‬
‫>‪<td></td‬‬
‫>‪<td></td‬‬
‫>‪</tr‬‬

‫>‪<tr‬‬
‫>‪<td></td‬‬
‫>‪<td></td‬‬
‫>‪<td></td‬‬
‫>‪</tr‬‬

‫>‪<tr‬‬

‫>‪<td></td‬‬
‫>‪<td></td‬‬
‫>‪<td></td‬‬
‫>‪</tr‬‬

‫>‪</table‬‬
‫>‪</td‬‬

‫>‪</form‬‬
‫>‪</tr‬‬
‫>‪</table‬‬

‫ﺗﻄﻠﻊ ﻟﻼﻛﻮاد اﻟﺴﺎﺑﻘﮫ ﺟﯿﺪا‪ ,‬ﺛﻢ ﺑﻌﺪھﺎ ﺳﻮف ﻧﻤﻼ ﻛﻞ ﺧﻠﯿﮫ ﺑﺎﻟﺒﯿﺎﻧﺎت اﻟﺨﺎﺻﮫ ﺑﮭﺎ ﺑﺤﯿﺚ ﯾﺼﺒﺢ اﻟﻜﻮد ﻛﺎﻣﻼ ھﻜﺬا‪.......‬‬

‫رﻣﺰ ‪:Code‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪26/45‬‬
8/18/2016 php ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف‬
<td><input name="mypassword" type="password" id="mypassword"></td>

<td>:</td>
<td dir="rtl">‫<اﻟﺒﺎﺳﻮرد‬/td>
</tr>
<tr>
<td>&nbsp;</td>

<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="‫<>"دﺧﻮل‬/td>
</tr>

</table>
</td>
</form>
</tr>
</table>
<body>
</body>
</html>

<table>
<tr>
<form>
<td>
<table>

:‫ﻻﺣﻆ ﻓﻰ اﻟﻜﻮد اﻟﺴﺎﺑﻖ اﻻﺗﻰ‬

‫ وھﻰ اﻟﺼﻔﺤﺔ‬, checklogin.php ‫اﻧﻨﺎ ﺣﺪدﻧﺎ ﻓﻰ اﻟﻔﻮرم ﺻﻔﺤﺔ اﻟﺘﻨﻔﯿﺬ‬-1
‫اﻟﻠﻰ راح ﺗﻘﻮم ﺑﻔﺤﺺ اﻟﯿﻮزر واﻟﺒﺎﺳﻮرد واﻟﺘﺄﻛﺪ ﻣﻦ وﺟﻮدھﻢ ﻓﻰ ﻗﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت‬

:Code ‫رﻣﺰ‬

<form name="form1" method="post" action="checklogin.php">

input‫اﻧﮫ ﯾﻮﺟﺪ ﺛﻼث اﻧﻮاع ﻟﻞ‬-2

text ‫ وھﻮ ﻟﻠﯿﻮزر وﻧﻮﻋﮫ‬input ‫اول‬

:Code ‫رﻣﺰ‬

<input name="myusername" type="text" id="myusername">

password ‫ وھﻮ ﻟﻠﺒﺎﺳﻮرد وﻧﻮﻋﮫ‬input ‫ﺛﺎﻧﻰ‬

:Code ‫رﻣﺰ‬

<input name="mypassword" type="password" id="mypassword">

submit ‫ وھﻮ ﻟﺰر اﻟﺘﻨﻔﯿﺬ وﻧﻮﻋﮫ‬input ‫ﺛﺎﻟﺚ‬

:Code ‫رﻣﺰ‬

<input type="submit" name="Submit" value="‫>"دﺧﻮل‬

‫وطﺒﻌﺎ راح ﻧﻀﯿﻒ ﺗﻌﺮﯾﻒ وﺗﺮﻣﯿﺰ اﻟﺼﻔﺤﺔ ﻓﻰ اﻻول ﻗﺒﻞ ھﺬا اﻟﻜﻮد‬

http://www.advphp.com/tuts/fullarticles/ 27/45
8/18/2016 php ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف‬

CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"]

<""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<"html xmlns="http://www.w3.org/1999/xhtml>
<head>
</ "meta http-equiv="Content-Type" content="text/html; charset=utf-8>
<title/>‫<ﺗﺴﺠﯿﻞ اﻟﺪﺧﻮل‬title>

<?php
ob_start();
$host="localhost"; // Host name
$username="root"; // Mysql username
$password="root"; // Mysql password
$db_name="final3"; // Database name
$tbl_name="members"; // Table name

// Connect to server and select databse.

mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
......‫ﺑﮭﯿﻚ اﻧﺘﮭﯿﻨﺎ ﻣﻦ ھﺬا اﻟﻤﻠﻒ‬
mysql_query("set names 'utf8';");

// Define $myusername and $mypassword

$myusername=$_POST['myusername'];
‫ اﻟﺨﺎص ﺑﺎﻟﺘﺤﻘﻖ ﻣﻦ اﻟﯿﻮزر واﻟﺒﺎﺳﻮرد‬checklogin.php ‫ﺑﺮﻣﺠﺔ ﻣﻠﻒ‬-2
$mypassword=$_POST['mypassword'];
‫ﺧﻠﻮﻧﺎ اﻻول ﻧﺸﻮف ﻛﻮد ھﺬا اﻟﻤﻠﻒ ﺛﻢ ﺳﻨﻘﻮم ﺑﺸﺮﺣﮫ‬
// To protect MySQL injection (more detail about MySQL injection)
$myusername = stripslashes($myusername);
$mypassword = stripslashes($mypassword);
:Code ‫رﻣﺰ‬
$myusername = mysql_real_escape_string($myusername);
$mypassword = mysql_real_escape_string($mypassword);

$sql="SELECT * FROM $tbl_name WHERE username='$myusername' and password='$mypassword'";

$result=mysql_query($sql);

// Mysql_num_row is counting table row

$count=mysql_num_rows($result);
// If result matched $myusername and $mypassword, table row must be 1 row

if($count==1){
// Register $myusername, $mypassword and redirect to file "admin.php"

session_register("myusername");
session_register("mypassword");
header("location:admincp/index.php");
}
else {
echo "‫;"اﻟﯿﻮزر او اﻟﺒﺎﺳﻮرد ﺧﻄﺄ‬
echo "<br>";
echo "<a href=login.php>";
echo "‫;"ﻋﻮده ﻟﻠﺨﻠﻒ‬
echo "</a>";
}

ob_end_flush();
?>

:‫ﺷﺮح اﻟﻤﻠﻒ‬

output buffering ‫ﺑﺪأﻧﺎ ﺑﺎﺳﺘﺨﺪام داﻟﺔ اﻟﺘﺨﺰﯾﻦ اﻟﻤﺆﻗﺖ‬-1

‫واﻟﺘﻰ اﺳﺘﺨﺪﻣﻨﺎھﺎ ﻟﺘﻘﻮم ﺑﺘﺨﺰﯾﻦ اﻟﺒﯿﺎﻧﺎت اﻟﻤﺮﺳﻠﮫ ﻗﺒﻞ ارﺳﺎﻟﮭﺎ‬

http://www.advphp.com/tuts/fullarticles/ 28/45
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫رﻣﺰ ‪:Code‬‬

‫;)(‪ob_start‬‬

‫‪-2‬ﺛﻢ ﻧﺤﺪد ﻣﺘﻐﯿﺮات اﻻﺗﺼﺎل ﺑﻘﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت واواﻣﺮ اﻻﺗﺼﺎل‬

‫رﻣﺰ ‪:Code‬‬
‫;"‪$host="localhost‬‬
‫;"‪$username="root‬‬
‫;"‪$password="root‬‬
‫;"‪$db_name="final3‬‬
‫;"‪$tbl_name="members‬‬

‫;)"‪mysql_connect("$host", "$username", "$password")or die("cannot connect‬‬

‫;)"‪mysql_select_db("$db_name")or die("cannot select DB‬‬
‫;)";'‪mysql_query("set names 'utf8‬‬

‫وﻻﺣﻆ اﻟﻔﺎﻧﻜﺸﻦ اﻟﺴﺎﺑﻘﮫ‪:‬‬

‫رﻣﺰ ‪:Code‬‬

‫;)";'‪mysql_query("set names 'utf8‬‬

‫ووظﯿﻔﺘﮭﺎ ارﺳﺎل اﻟﺒﯿﺎﻧﺎت ﻟﻘﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت ﺑﺎﻟﺘﺮﻣﯿﺰ ‪ utf-8‬وھﻰ ﺧﻄﻮة ﻣﻔﻀﻠﺔ ﻓﻰ ﺗﺨﺰﯾﻦ اﻟﺒﯿﺎﻧﺎت‬

‫‪-3‬ﺛﻢ ﺳﻨﻘﻮم ﺑﻌﻤﻞ ﻣﺘﻐﯿﺮﯾﻦ ﻟﻨﺨﺰن ﻓﯿﮭﻢ اﻟﺒﯿﺎﻧﺎت اﻟﻤﺮﺳﻠﮫ واﻟﺘﻰ ﺗﻢ ﻛﺘﺎﺑﺘﮭﺎ ﻓﻰ‬
‫ﻓﻮرم اﻟﯿﻮزر واﻟﺒﺎﺳﻮرد‬

‫رﻣﺰ ‪:Code‬‬

‫;]'‪$myusername=$_POST['myusername‬‬
‫;]'‪$mypassword=$_POST['mypassword‬‬

‫وﻛﻨﻘﻄﮫ أﻣﻨﯿﮫ ﺳﻨﻘﻮم ﺑﺎﺿﺎﻓﺔ داﻟﺔ ‪ stripslashes‬و‪ mysql_real_escape_string‬ﻟﺘﺄﻣﯿﻦ اﻟﻤﺪﺧﻼت اﻟﺘﻰ ﺳﯿﺘﻢ ارﺳﺎﻟﮭﺎ ﻣﻦ ﻓﻮرم اﻟﯿﻮزر واﻟﺒﺎﺳﻮرد ﻟﻘﺎﻋﺪة‬
‫اﻟﺒﯿﺎﻧﺎت ﻟﺘﺠﻨﺐ ﺣﻘﻦ ﻗﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت واﺧﺘﺮاﻗﮭﺎ‬

‫رﻣﺰ ‪:Code‬‬

‫‪$myusername‬‬ ‫=‬ ‫;)‪stripslashes($myusername‬‬

‫‪$mypassword‬‬ ‫=‬ ‫;)‪stripslashes($mypassword‬‬
‫‪$myusername‬‬ ‫=‬ ‫;)‪mysql_real_escape_string($myusername‬‬
‫‪$mypassword‬‬ ‫=‬ ‫;)‪mysql_real_escape_string($mypassword‬‬

‫ﺛﻢ ﺑﻌﺪھﺎ ﺳﻨﻘﻮم ﺑﺎﺧﺘﯿﺎر اﻟﻘﺎﻋﺪة واﻟﯿﻮزر ﻟﻨﺮى ﻣﻄﺎﺑﻘﺔ اﻟﯿﻮزر واﻟﺒﺎﺳﻮرد وﻣﻄﺎﺑﻘﺘﮭﺎ ﺑﺎﻟﻌﻀﻮﯾﺎت اﻟﻤﺨﺰﻧﮫ ﻓﻰ اﻟﻘﺎﻋﺪه ام ﻻ‪..‬‬
‫واذا ﻧﻌﻢ ‪ ,‬ﺳﻨﻘﻮم ﺑﻌﻤﻞ ﺟﻠﺴﺔ ﻟﺘﺨﺰﯾﻦ ھﺬه اﻟﺒﯿﺎﻧﺎت اﻟﺼﺤﯿﺤﮫ ﻟﯿﺘﻢ‬
‫اﻟﻌﻮده ﻟﮭﺎ ﻻﺣﻘﺎ دون اﻟﺤﺎﺟﮫ ﻻﻋﺎدة اﻟﺘﺤﻘﻖ ﻣﺮه اﺧﺮى‬

‫رﻣﺰ ‪:Code‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪29/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬
‫;)‪$result=mysql_query($sql‬‬
‫;)‪$count=mysql_num_rows($result‬‬
‫{)‪if($count==1‬‬
‫;)"‪session_register("myusername‬‬
‫;)"‪session_register("mypassword‬‬
‫;)"‪header("location:admincp/index.php‬‬
‫}‬
‫{ ‪else‬‬
‫;"اﻟﯿﻮزر او اﻟﺒﺎﺳﻮرد ﺧﻄﺄ" ‪echo‬‬
‫;">‪echo "<br‬‬
‫;">‪echo "<a href=login.php‬‬
‫;"ﻋﻮده ﻟﻠﺨﻠﻒ" ‪echo‬‬
‫;">‪echo "</a‬‬
‫}‬

‫وﻻﺣﻆ اﻧﮫ ﻓﻰ ﺣﺎﻟﺔ اﻧﮫ اﻟﺒﯿﺎﻧﺎت ﺻﺤﯿﺤﮫ واﻟﻌﻀﻮﯾﮫ ﻣﻮﺟﻮده ﺑﺎﻟﻔﻌﻞ‬

‫ﺳﻮف ﯾﺘﻢ ﺗﺴﺠﯿﻞ اﻟﺪﺧﻮل وﺗﺤﻮﯾﻞ اﻟﻤﺴﺘﺨﺪم ﻟﺼﻔﺤﺔ ‪admincp/index.php‬‬

‫ام اذا ﻟﻢ ﯾﺘﻢ اﯾﺠﺎد ﻋﻀﻮﯾﺔ ﺳﯿﺘﻢ ارﺟﺎﻋﮫ ﻟﺼﻔﺤﺔ اﻟﺪﺧﻮل ﻣﺮه اﺧﺮى ‪login.php‬‬

‫واﺧﯿﺮا‪ ,‬ﻧﻐﻠﻖ ﻓﺎﻧﻜﺸﻦ اﻟﺘﺨﺰﯾﻦ اﻟﻤﺆﻗﺖ ﻟﻨﺮﺳﻞ اﻟﺒﯿﺎﻧﺎت ﺑﺎﻟﻔﻌﻞ ﻟﺘﻨﻔﯿﺬھﺎ‬

‫رﻣﺰ ‪:Code‬‬

‫;)(‪ob_end_flush‬‬

‫ﺑﮭﯿﻚ ﯾﻨﺘﮭﻰ ﺷﺮح ھﺬا اﻟﻤﻠﻒ‪............‬‬

‫وﺑﮭﯿﻚ ﯾﻨﺘﮭﻰ اﻟﺠﺰء اﻻول ﻣﻦ اﻟﻤﻮﺿﻮع‬

‫‪-----------------‬‬

‫اﻟﺠﺰء اﻟﺜﺎﻧﻰ‪:‬ﺷﺮح ﻧﻈﺎم اﻟﻔﺮﯾﻤﺎت وﺗﻘﺴﯿﻢ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ‬

‫ﺑﺎﻟﻨﺴﺒﮫ ﻟﮭﺬا اﻟﺠﺰء ‪ ,‬ﻓﮭﻮ ﻣﮭﻢ ﺷﺮﺣﮫ ‪ ,‬ﻻن ھﯿﻜﻞ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ اﻟﺸﻜﻠﻰ‬
‫ﯾﻌﺘﻤﺪ ﻋﻠﻰ ﻧﻈﺎم اﻟﻔﺮﯾﻤﺎت ‪ ,‬وﺳﻮف أﻗﻮم ﺑﺸﺮح ﻟﻜﻢ ﺑﻜﻞ ﺳﮭﻮﻟﮫ ﺣﺘﻰ ﺗﻔﮭﻤﻮا‬
‫اﻟﻐﺮض ﻣﻦ ھﺬا اﻟﺠﺰء‬

‫‪-‬ﻓﻠﻨﻔﺮض اﻧﻨﺎ ﻧﺮﯾﺪ ﻋﺮض أﻛﺜﺮ ﻣﻦ ﺻﻔﺤﺔ ﻓﻰ ﻧﻔﺲ اﻟﺼﻔﺤﺔ ‪ ,‬ﯾﻌﻨﻰ ﻣﺜﻼ‬
‫ﻋﻨﺪﻧﺎ ﺻﻔﺤﺔ اﺳﻤﮭﺎ ﻣﺤﻤﺪ وﺻﻔﺤﺔ اﺳﻤﮫ أﺣﻤﺪ وﺻﻔﺤﺔ اﺳﻤﮭﺎ ﻣﺼﻄﻔﻰ‬
‫واﻧﺎ ارﯾﺪ ﺗﻘﺴﯿﻢ ﺻﻔﺤﺔ ﻣﺤﻤﺪ ﺑﺤﯿﺚ ﯾﻜﻮن ﺑﮭﺎ ﺻﻔﺤﺔ أﺣﻤﺪ وﺻﻔﺤﺔ ﻣﺼﻄﻔﻰ‬
‫ﺑﺤﯿﺚ ﻣﺜﻼ ان ﺗﺄﺧﺬ ﺻﻔﺤﺔ ﻣﺤﻤﺪ ﻣﺴﺎﺣﺔ ‪ %30‬ﻣﻦ ﻣﺴﺎﺣﺔ اﻟﺼﻔﺤﺔ اﻟﻜﻠﯿﺔ‬
‫وﺻﻔﺤﺔ أﺣﻤﺪ ‪ %30‬ﻣﻦ ﻣﺴﺎﺣﺔ اﻟﺼﻔﺤﺔ اﻟﻜﻠﯿﺔ وﺻﻔﺤﺔ ﻣﺼﻄﻔﻰ ‪ %40‬ﻣﻦ ﻣﺴﺎﺣﺔ‬
‫اﻟﺼﻔﺤﺔ ﺑﺤﯿﺚ ﺗﺼﺒﺢ اﻟﻤﺴﺎﺣﺔ اﻟﻜﻠﯿﺔ ﻟﻠﺜﻼث ﺻﻔﺤﺎت ﻣﻌﺎ ‪%100‬‬

‫ھﺬا اﻟﻔﻜﺮه اﻟﺒﺴﯿﻄﮫ راح ﻧﺤﻮﻟﮭﺎ ﺳﻮﯾﺎﻟﺸﻰء واﻗﻌﻰ ﯾﺴﺘﺨﺪم ﺑﻜﺜﺮه‬

‫ﻓﻰ ﻟﻮﺣﺔ ﺗﺤﻜﻢ ﺗﺮاھﺎ‬

‫اوﻻ‪ :‬ﺧﻠﻮﻧﺎ ﻧﺴﻮى ﻣﺠﻠﺪ اﺳﻤﮫ ‪ admincp‬داﺧﻞ ﻣﺠﻠﺪ ‪final3‬‬

‫ﺑﺪاﺧﻞ ھﺬا اﻟﻤﻠﻒ ﺳﻮف ﻧﻘﻮم ﺑﺒﺮﻣﺠﺔ ﺛﻼث ﻣﻠﻔﺎت‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪30/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫‪frame.html-1‬‬
‫‪admin.html-2‬‬
‫‪page1.html-3‬‬

‫اوﻻ‪ :‬ﻣﻠﻒ ‪frame.html‬‬

‫واﻟﻜﻮد اﻟﺨﺎص ﺑﮫ ھﻮ ‪:‬‬

‫رﻣﺰ ‪:Code‬‬
‫>"‪<frameset cols="50%,10%‬‬
‫>"‪<frame src="page1.html" name="left‬‬
‫>"‪<frame src="admin.html" name="right‬‬

‫>‪</frameset‬‬

‫طﺒﻌﺎ ھﺬا ھﻮ اﻟﻜﻮد اﻟﻠﻰ راح ﯾﻘﺴﻢ ﺻﻔﺤﺔ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ ﻟﺠﺰﺋﯿﻦ‬
‫ﺟﺰء ﻟﻌﺮض ﺻﻔﺤﺔ ‪ page1.html‬وراح ﯾﺄﺧﺬ ‪ %50‬ﻣﻦ ﻋﺮض اﻟﺼﻔﺤﺔ وراح ﯾﻜﻮن ﻋﻠﻰ ﯾﺴﺎر اﻟﺼﻔﺤﺔ ‪ ,‬واﻟﺠﺰء اﻻﺧﺮ ﻟﻌﺮض ﺻﻔﺤﺔ ‪, admin.html‬‬
‫وراح ﯾﺄﺧﺬ‬
‫‪ 10%‬ﻣﻦ ﻋﺮض اﻟﺼﻔﺤﺔ وراح ﯾﻜﻮن ﻋﻠﻰ اﻟﯿﻤﯿﻦ‬

‫ﻣﻼﺣﻈﮫ ھﺎﻣﮫ ﺟﺪا‪ :‬ﻋﻨﺪ وﺿﻊ ﻛﻮد ‪ frameset‬اﻟﺴﺎﺑﻖ ﻻﺑﺪ ان ﺗﻨﺘﺒﮫ اﻧﻚ ﻻﺑﺪ‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪31/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫ان ﺗﺤﺬف ﻛﻮد ‪ body‬اﻟﺨﺎص ﺑﺎﻟﺼﻔﺤﺔ ‪ ,‬ﯾﻌﻨﻰ اﯾﺎك وان ﺗﻀﻊ ﻛﻮد ‪frameset‬‬
‫ﺑﺪاﺧﻞ ﻛﻮد ‪ ,body‬ﻻن وﺿﻊ وﺳﻢ ‪ frameset‬ﯾﺤﻞ ﻣﺤﻞ وﺳﻢ ‪ body‬ﻓﻰ اﻟﺼﻔﺤﺔ‬

‫ﺑﮭﯿﻚ ﯾﻜﻮن اﻧﺘﮭﻰ ﺷﺮح اﻟﺠﺰء اﻟﺜﺎﻧﻰ ﻣﻦ اﻟﺪرس‪...............‬‬

‫ﺳﺄﺳﺘﻜﻤﻞ ﺷﺮح ﺑﻘﯿﺔ اﻟﺠﺰﺋﯿﻦ اﻟﻤﺘﺒﻘﯿﻦ ﻓﻰ اﻟﺪرس اﻟﻘﺎدم ﻻﻧﮭﺎ ﺗﺤﺘﺎج ﻟﺪرس ﻣﻨﻔﺼﻞ ‪..........‬‬

‫ﺑﺎﻟﺘﻮﻓﯿﻖ‪.............‬‬

‫اﻟﺠﺰء اﻟﺮاﺑﻊ‬
‫ﻧﺴﺘﻜﻤﻞ ﻣﻌﻜﻢ زوار ﻣﻮﻗﻌﻨﺎ اﻟﻜﺮام اﻟﺘﻄﻮﯾﺮ اﻟﺜﺎﻟﺚ‪ ,‬وﻛﻨﺎ ﻗﺪ اﻧﮭﯿﻨﺎ ﻓﻰ اﻟﺪرس اﻟﺴﺎﺑﻖ اﻟﺠﺰء اﻟﺜﺎﻧﻰ اﻟﺨﺎص‬
‫ﺑﻨﻈﺎم اﻟﻔﺮﯾﻤﺎت ‪........‬‬

‫ﻧﻜﻤﻞ ﻋﻠﻰ ﺑﺮﻛﺔ ﷲ ‪.........‬‬

‫اﻟﺠﺰء اﻟﺜﺎﻟﺚ‪ :‬ﺷﺮح ﺑﺮﻣﺠﺔ ﻣﻠﻔﺎت ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ واﻟﺘﺤﻜﻢ ﺑﺎﻟﻤﻘﺎﻻت‬

‫دﻋﻮﻧﺎ أوﻻ ﻛﻤﺎ ﻋﻮدﻧﺎﻛﻢ داﺋﻤﺎ ان ﻧﻀﻊ ﻣﺨﻄﻂ ﻟﻤﺎ ﺳﻮف ﺳﯿﺘﻢ اﻧﺠﺎزه ﺳﻮﯾﺎ‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪32/45‬‬
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫اوﻻ‪ :‬اﻧﺸﺎء ﻗﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت اﻟﺨﺎﺻﮫ ﺑﺘﺨﺰﯾﻦ اﻟﻤﻘﺎﻻت‬

‫‪-1‬اذھﺐ ﻟﻨﻔﺲ اﻟﻘﺎﻋﺪه اﻟﺘﻰ ﻗﻤﻨﺎ ﺑﺄﻧﺸﺎءھﺎ واﻟﺘﻰ ﺳﻤﯿﻨﺎھﺎ ﻓﻰ اﻟﺪرس اﻟﺴﺎﺑﻖ ‪final3‬‬
‫وﻣﻦ أﻣﺮ ‪ sql‬ﻣﻦ ﻓﻮق‪ ,‬راح ﻧﻀﯿﻒ أﻣﺮ ﻋﻤﻞ ﺟﺪول واﺳﻤﮫ ‪ news‬وﺑﮫ اﻻﻋﻤﺪه‬

‫‪id‬‬
‫‪ :title‬ﻟﺘﺨﺰﯾﻦ ﻋﻨﻮان اﻟﻤﻘﺎل‬
‫‪:content‬ﻟﺘﺨﺰﯾﻦ ﻣﺤﺘﻮى اﻟﻤﻘﺎل‬
‫‪ :author‬ﻟﺘﺨﺰﯾﻦ ﻛﺎﺗﺐ اﻟﻤﻘﺎل‬
‫‪: date‬ﻟﺘﺨﺰﯾﻦ ﺗﺎرﯾﺦ ﻛﺘﺎﺑﺔ اﻟﻤﻘﺎل‬

‫رﻣﺰ ‪:Code‬‬

‫( `‪CREATE TABLE `news‬‬

‫‪`id` int(11) NOT NULL auto_increment,‬‬
‫‪`title` text NOT NULL ,‬‬
‫‪`content` text NOT NULL,‬‬
‫‪`author` text NOT NULL,‬‬
‫‪`date` datetime NOT NULL default '00-00-0000 00:00:00',‬‬
‫)`‪PRIMARY KEY (`id‬‬
‫; ‪) TYPE=MyISAM AUTO_INCREMENT=10‬‬

‫ﺛﺎﻧﯿﺎ‪ :‬ﻋﻤﻞ ﻣﻠﻒ اﻻﺗﺼﺎل ﺑﻘﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت وراح ﻧﺴﻤﯿﮫ ‪site.inc.php‬‬

‫وﻗﻢ ﺑﻮﺿﻌﮫ داﺧﻞ ﻣﺠﻠﺪ ‪final3‬‬

‫وھﺬا ھﻮ ﻛﻮده ‪:‬‬

‫رﻣﺰ ‪:Code‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪33/45‬‬
8/18/2016 php ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف‬
$confg['db_paswd'] = "root";
$confg['db_host'] = "localhost";
$confg['db_dbase'] = "final3";

function db_login() {

global $confg;

$link = @mysql_connect($confg['db_host'], $confg['db_uname'], $confg['db_paswd']) or die("Err

@mysql_select_db($confg['db_dbase'], $link);
mysql_query("set names 'utf8';");
}

function db_logout() {

@mysql_close($link);

?>

‫طﺒﻌﺎ ﻓﻰ اﻻول ﺣﺪدﻧﺎ ﻣﺘﻐﯿﺮات اﺳﻢ اﻟﮭﻮﺳﺖ واﻟﯿﻮزر وﺑﺎﺳﻮرد اﻟﻘﺎﻋﺪه واﺳﻢ ﻗﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت‬

:Code ‫رﻣﺰ‬

$confg['db_uname'] = "root";
$confg['db_paswd'] = "root";
$confg['db_host'] = "localhost";
$confg['db_dbase'] = "final3";

‫ﺛﻢ ﻗﻤﻨﺎ ﺑﻌﻤﻞ ﻓﺎﻧﻜﺸﻦ ﻟﺘﻨﻔﯿﺬ أﻣﺮ اﻻﺗﺼﺎل ﺑﻘﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت‬

:Code ‫رﻣﺰ‬
function db_login() {

global $confg;

$link = @mysql_connect($confg['db_host'], $confg['db_uname'], $confg['db_paswd']) or die("Err

@mysql_select_db($confg['db_dbase'], $link);
mysql_query("set names 'utf8';");
}

‫ ﻟﯿﺘﻢ ﺗﺨﺰﯾﻦ اﻟﺒﯿﺎﻧﺎت ﺑﮭﺬا اﻟﺘﺮﻣﯿﺰ‬utf-8 ‫وﻻﺣﻆ اﺧﺮ ﺟﻤﻠﺔ ﻻرﺳﺎل اﻻﺳﺘﻌﻼم ﺑﺘﺮﻣﯿﺰ‬

‫ اﻟﺨﺎص ﺑﻠﻮﺣﺔ اﻟﺘﺤﻜﻢ‬index.php ‫ ﺑﺮﻣﺠﺔ ﻣﻠﻒ اﻻﻧﺪﻛﺲ‬:‫ﺛﺎﻟﺜﺎ‬

:‫ﻧﺸﻮف ﻛﻮده اﻻول ﺛﻢ ﻧﺸﺮﺣﮫ‬

:Code ‫رﻣﺰ‬

http://www.advphp.com/tuts/fullarticles/ 34/45
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬
‫?<‬
‫;)(‪session_start‬‬
‫{))‪if(!session_is_registered(myusername‬‬
‫;)"‪header("location:../login.php‬‬
‫}‬
‫>?‬

‫‪<?php‬‬

‫;)"‪include("frame.html‬‬

‫>?‬

‫ﻓﻰ ھﺬا اﻟﻤﻠﻒ اﻟﻠﻰ راح ﻧﻀﻌﮫ داﺧﻞ ﻣﺠﻠﺪ ‪ ,admincp‬راح ﯾﻜﻮن ﻛﻮده ﺑﺴﯿﻂ‬
‫وھﻮ ﻋﺒﺎره اﻧﻜﻠﻮد ﻟﺠﻠﺐ ﻣﻠﻒ ‪ frame.html‬اﻟﻠﻰ ﺳﻮﯾﻨﺎه ﻓﻰ اﻟﺪرس اﻟﺴﺎﺑﻖ‬
‫اﻟﺨﺎص ﺑﺘﻘﺴﯿﻢ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ‬

‫وﯾﺴﺒﻖ ھﺬا اﻟﻜﻮد ﺟﻠﺴﺔ ﻟﺘﻘﻮم ﺑﺘﺴﺠﯿﻞ ﺟﻠﺴﺔ ﺗﺴﺠﯿﻞ اﻟﺪﺧﻮل ﻟﮭﺬه اﻟﻤﻨﻄﻘﮫ اﻟﻤﺤﻤﯿﮫ ‪ ,‬ﺑﺤﯿﺚ ﯾﺘﻢ‬
‫اﻟﺪﺧﻮل ﻟﻠﻮﺣﺔ اﻟﺘﺤﻜﻢ ﻋﻦ طﺮﯾﻖ ﻧﻤﻮذج ﺗﺴﺠﯿﻞ اﻟﺪﺧﻮل ﻓﻘﻂ ‪login.php‬‬

‫طﺒﻌﺎ ﻛﻨﺎ ﻓﻰ اﻟﺪرس اﻟﺴﺎﺑﻖ ﻗﺪ ﻗﻤﻨﺎ ﺑﻌﻤﻞ اﻟﺜﻼث ﻣﻠﻔﺎت وھﻢ ‪frame.html,admin.html,page1.html‬‬
‫وﻟﻜﻦ ﻟﻢ ﻧﻘﻮم ﺑﻌﻤﻞ اﻟﻜﻮد اﻟﺨﺎص ﺑﺎﻟﻤﻠﻔﯿﻦ ‪ admin.html‬و‪page1.html‬‬

‫اوﻻ‪ :‬ﻧﺸﻮف ﻛﻮد ﻣﻠﻒ ‪admin.html‬‬

‫>"‪<div id="wrapper‬‬

‫>‪</h3‬ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ>‪<h3‬‬
‫رﻣﺰ ‪:Code‬‬
‫>"‪<div id="sidebar‬‬
‫>‪</a></li‬اﻟﺮﺋﯿﺴﯿﺔ>"‪<li><a target="_top" href="index.php‬‬

‫>‪<br‬‬
‫>‪<br‬‬
‫>‪</h3‬ادارة اﻟﻤﻘﺎﻻت>‪<h3‬‬
‫>‪ </a></li‬ﺗﻌﺪﯾﻞ وﺣﺬف>"‪<li><a href="admin/list.php" target="left‬‬

‫>‪</a></li‬اﺿﺎﻓﺔ ﻣﻘﺎل>"‪<li><a href="admin/add.php" target="left‬‬

‫>‪<li><a href="#">link</a></li‬‬

‫>‪<li><a href="#">link</a></li‬‬
‫>‪</div‬‬

‫>‪</div‬‬

‫وﻧﻀﯿﻒ ﻟﮭﺬا اﻟﻜﻮد ﺑﻌﺾ اﻟﺘﺠﻤﯿﻞ ب ‪ css‬ﻓﻰ ﻧﻔﺲ اﻟﺼﻔﺤﺔ‬

‫رﻣﺰ ‪:Code‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪35/45‬‬
8/18/2016 php ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف‬
#body{
background-color:#999999;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;

#sidebar{
width:200px;
height:500px;
list-style:none;
text-decoration:none;
padding-left:10px;
}

</style>

: ‫ﺑﺤﯿﺚ ﺳﺘﻈﮭﺮ اﻟﻘﺎﺋﻤﮫ اﻟﯿﻤﻨﻰ ﻟﻠﻮﺣﺔ اﻟﺘﺤﻜﻢ ﺑﺎﻟﺸﻜﻞ اﻻﺗﻰ‬

page1.html ‫ ﻧﺸﻮف ﻛﻮد ﻣﻠﻒ‬:‫ﺛﺎﻧﯿﺎ‬

:Code ‫رﻣﺰ‬

http://www.advphp.com/tuts/fullarticles/ 36/45
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫";‪<h5 style="border-bottom:1px solid #eeeeee;"><a style="text-decoration:none‬‬

‫‪<h4 style="text-align:left;"><a style="text-decoration:none;" target="_top" h‬‬

‫طﺒﻌﺎ اﻟﻜﻮد ﺑﺴﯿﻂ‪ ,‬واﻧﺎ ﺑﻌﺘﺬر ﻋﻦ ﺗﺠﻤﯿﻞ اﻟﻜﻮد داﺧﻞ اﻻوﺳﻤﮫ ﻻﻧﻰ ﻻ اﺣﺐ ھﺬه اﻟﻄﺮﯾﻘﮫ‪ ,‬ﻟﻜﻦ وﺟﺪت اﻟﻤﻠﻒ ﺣﺠﻤﮫ ﺻﻐﯿﺮ ﻓﻰ ﻛﻮده ‪ ,‬ﻗﻠﻨﺎ ﻣﺎ راح ﺗﺄﺛﺮ ﻛﺜﯿﺮ‬

‫ﺑﺲ ﻓﯿﮫ ﻣﻼﺣﻈﮫ ﻣﮭﻤﮫ أرﯾﺪﻛﻢ ﺗﺘﻌﻠﻤﻮھﺎ‪ ,‬وھﻰ ﻣﻼﺣﻈﺔ ﻋﺒﺎرة ‪ target‬واﻧﻰ ﺳﻮﯾﺘﮭﺎ ‪ _top‬وھﻰ ﻣﮭﻤﮫ ﺟﺪا‬

‫ﻻﻧﻚ ﻟﻮ ﻣﺎﺳﻮﯾﺖ ھﯿﻚ‪ ,‬ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﻰ ﻟﻨﻚ ﺗﺴﺠﯿﻞ اﻟﺨﺮوج او اﻟﻌﻮده ‪ ,‬راح ﺗﺠﺪ ان اﻟﺼﻔﺤﺔ ﺗﻌﻮد‬
‫ﺑﺪاﺧﻞ اﻟﻔﺮﯾﻢ اﻻﯾﺴﺮ ﻓﻘﻂ‪ ,‬وﻟﯿﺲ اﻟﺼﻔﺤﺔ ﻛﻠﮭﺎ‪ ,‬ﻟﺬﻟﻚ ﻟﻨﺘﺠﻨﺐ ھﺬه اﻟﻤﺸﻜﻠﮫ ‪ ,‬ﻧﻘﻮم ﺑﻌﻤﻞ اﻟﮭﺪف ‪target‬‬
‫ھﻮ اﻟﻌﻮده ﻟﻜﺎﻓﺔ اﻟﺼﻔﺤﺔ ﻛﻜﻞ ‪_top‬‬

‫ﺑﻌﺪ ﻣﺎ ﺳﻮﯾﻨﺎ ﻛﻮد ﺻﻔﺤﺔ ‪ page1.html‬راح ﯾﻈﮭﺮ ﯾﺴﺎر ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ ﻛﺎﻻﺗﻰ‪:‬‬

‫‪----------------------------------------‬‬

‫راﺑﻌﺎ‪:‬ﺑﺮﻣﺠﺔ ﻣﻠﻔﺎت اﻟﺘﺤﻜﻢ ﺑﺎﻟﻤﻘﺎﻻت‬

‫ﻛﻨﺎ ﺳﻮﯾﻨﺎ ﻣﺠﻠﺪ ﻓﻰ اﻟﺪرس اﻟﺴﺎﺑﻖ اﺳﻤﮫ ‪ ,admincp‬اﻟﺤﯿﻦ ﺑﺪاﺧﻞ ھﺬا اﻟﻤﺠﻠﺪ‬
‫ﻗﻢ ﺑﻌﻤﻞ ﻣﺠﻠﺪ اﺳﻤﮫ ‪ , admin‬وراح ﻧﻘﻮم ﺑﺪاﺧﻠﮫ ﺑﻮﺿﻊ ﻣﻠﻔﺎت اﻟﺘﺤﻜﻢ ﺑﺎﻟﻤﻘﺎﻻت ﻣﻦ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ‬

‫‪add.php‬‬
‫‪list.php‬‬
‫‪edit.php‬‬
‫‪delete.php‬‬

‫اوﻻ‪ :‬ﺑﺮﻣﺠﺔ ﻣﻠﻒ ‪add.php‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪37/45‬‬
8/18/2016 php ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف‬

: ‫وھﺬا ھﻮ ﻛﻮد ھﺬه اﻟﺼﻔﺤﺔ‬

:Code ‫رﻣﺰ‬

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>‫<اﺿﺎﻓﺔ ﻣﻘﺎل ﺟﺪﯾﺪ‬/title>

</head>

<?php
require_once("../../site.inc.php"); //Calls in the previous file we created

// form not yet submitted

// display initial form
if (!$submit)
{

?>

<div style=" direction:rtl;margin-right:10px;">

‫<اﺿﺎﻓﺔ ﻣﻘﺎل ﺟﺪﯾﺪ‬br />

<form action="<? echo $PHP_SELF; ?>" method="POST">

<input type="hidden" name="id" value="id">

‫<اﻟﻌﻨﻮان‬br />
<input size="50" maxlength="60" type="text" name="title"><br />

‫<اﻟﻤﻘﺎل‬br />
<textarea name="content" cols="38" rows="10"> </textarea> <br />
:‫ﺷﺮح اﻟﻜﻮد ﺑﺄﺧﺘﺼﺎر‬
‫<اﺳﻢ اﻟﻜﺎﺗﺐ‬br />
<input size="50" maxlength="250" type="text"
‫ﻓﻮرم ادﺧﺎل اﻟﺒﯿﺎﻧﺎت وﻛﺘﺎﺑﺘﮭﺎ‬ ‫ﻋﻤﻞ‬+ ‫ﺑﺎﻟﻘﺎﻋﺪة‬name="author">
‫ اﻻﺗﺼﺎل‬:‫اوﻻ‬ <br />

<input type="Submit" name="submit" value="‫>"اﺿﻒ اﻟﻤﻘﺎل‬

</form>
</div> :Code ‫رﻣﺰ‬
<?

} else {

//set up error array

$err = array();
$count = 0;

//validate the user text input fields

if (!$title) { $err[$count] = "Invalid entry: title"; $count++; }

if (!$content) { $err[$count] = "Invalid entry: content"; $count++; }

if (!$author) { $err[$count] = "Invalid entry: author"; $count++; }

// if no error found...
if (sizeof($err) == 0) {

db_login(); //we defined this function in site.inc.php

// generate and execute query to insert the post

$query = "INSERT INTO news(id, title, content, author, date) VALUES(0, '$title', '$co
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// print result
echo "‫< ﺗﻢ اﺿﺎﻓﺔ اﻟﻤﻘﺎل‬a href='list.php'>‫<اﻟﻌﻮده ﻟﻘﺎﺋﻤﺔ اﻟﻤﻘﺎﻻت‬/a>.";
http://www.advphp.com/tuts/fullarticles/ 38/45
8/18/2016 php ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف‬

<?php
require_once("../../site.inc.php"); //Calls in the previous file we created

// form not yet submitted

// display initial form
if (!$submit)
{

?>

<div style=" direction:rtl;margin-right:10px;">

‫<اﺿﺎﻓﺔ ﻣﻘﺎل ﺟﺪﯾﺪ‬br />

<form action="<? echo $PHP_SELF; ?>" method="POST">
<input type="hidden" name="id" value="id">

‫<اﻟﻌﻨﻮان‬br />
<input size="50" maxlength="60" type="text" name="title"><br />

‫<اﻟﻤﻘﺎل‬br />
<textarea name="content" cols="38" rows="10"> </textarea> <br />
‫<اﺳﻢ اﻟﻜﺎﺗﺐ‬br />

<input size="50" maxlength="250" type="text" name="author"> <br />

<input type="Submit" name="submit" value="‫>"اﺿﻒ اﻟﻤﻘﺎل‬

</form>
</div>
<?
‫واﻟﺤﯿﻦ راح ﻧﻀﯿﻒ ﻛﻮد ﻟﻠﺘﺤﻘﻖ ﻣﻦ اﻟﻤﺪﺧﻼت ﻓﻰ اﻟﻔﻮرم‬
} else
‫وﻻﺣﻆ اﻧﮭﺎ راح ﺗﻜﻮن ﻋﺒﺎرة ﻋﻦ ﻣﺼﻔﻮﻓﺔ‬
‫ﺑﺤﯿﺚ اﻧﮫ ﻟﻮ ﻟﻢ ﯾﺘﻢ ادﺧﺎل اى ﻗﯿﻢ ﻓﻰ اى ﻓﻮرم راح ﯾﻌﻄﻰ ﻋﺒﺎرة ان اﻟﺤﻘﻮل ﻓﺎرﻏﺔ‬

‫ راح ﻧﺘﺼﻞ ﺑﺎﻟﻘﺎﻋﺪة وﻧﺪﺧﻞ‬,‫ اى اﻧﮫ ﻻ ﯾﻮﺟﺪ اى ﺧﻄﺄ‬0= ‫ ﺑﺤﯿﺚ ﻟﻮ ﺣﺠﻢ ﻣﺼﻔﻮﻓﺔ اﻟﺨﻄﺄ‬if ‫ راح ﻧﺴﻮى ﺣﺎﻟﺔ‬,‫وﻟﻮ ﻛﺎﻧﺖ اﻟﻔﻮرﻣﺰ ﻛﻠﮭﺎ ﻣﺪرج ﺑﮭﺎ اى ﻋﺒﺎرة‬
‫اﻟﺒﯿﺎﻧﺎت ﻓﻰ اﻟﻔﻮرﻣﺰ ﻓﻰ ﻗﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت‬

‫ﻧﺸﻮف اﻟﻜﻮد‬

:Code ‫رﻣﺰ‬

$err = array();
$count = 0;

if (!$title) { $err[$count] = "Invalid entry: title"; $count++; }

if (!$content) { $err[$count] = "Invalid entry: content"; $count++; }

if (!$author) { $err[$count] = "Invalid entry: author"; $count++; }

if (sizeof($err) == 0) {

‫واﺧﯿﺮا اﻻﺗﺼﺎل وﺗﺨﺰﯾﻦ اﻟﺒﯿﺎﻧﺎت ﻓﻰ اﻟﻘﺎﻋﺪة‬

:Code ‫رﻣﺰ‬
http://www.advphp.com/tuts/fullarticles/ 39/45
8/18/2016 php ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف‬

db_login(); //we defined this function in site.inc.php

// generate and execute query to insert the post

$query = "INSERT INTO news(id, title, content, author, date) VALUES(0, '$title', '$co
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// print result
echo "‫< ﺗﻢ اﺿﺎﻓﺔ اﻟﻤﻘﺎل‬a href='list.php'>‫<اﻟﻌﻮده ﻟﻘﺎﺋﻤﺔ اﻟﻤﻘﺎﻻت‬/a>.";
} else {
// errors found
// print as list
echo "<font size=-1>‫< ﺣﺪث ﺧﻄﺄ ﻏﯿﺮ ﻣﺘﻮﻗﻊ‬br>";
echo "<ul>";
for ($x=0; $x<sizeof($errorList); $x++) {
echo "<li>$errorList[$x]";
}
echo "</ul></font>";
}
}
?>
,‫اﻟﺤﯿﻦ ﻣﺤﺘﺎﺟﯿﻦ ﻟﻌﻤﻞ ﺻﻔﺤﺔ ﻻﻣﻜﺎﻧﯿﺔ ﺗﻌﺪﯾﻞ اﻟﻤﻮﺿﻮع او ﺣﺬﻓﮫ‬

‫راح ﻧﺴﻮى ﺻﻔﺤﺔ ﺑﮭﺎ ﻟﺴﺖ ﻻدراج ﻛﺎﻓﺔ اﻟﻤﻮاﺿﯿﻊ اﻟﻤﻀﺎﻓﺔ ﻣﻊ اﺿﺎﻓﺔ ﺧﯿﺎر اﻟﺘﻌﺪﯾﻞ او اﻟﺤﺬف‬

list.php ‫وراح ﻧﺴﻤﯿﮭﺎ‬

‫واﻧﺎ ﺷﺎرح اﻟﻜﻮد ﺑﺪاﺧﻠﮫ‬

:Code ‫رﻣﺰ‬

<div style="direction:rtl;">
<?

//‫ﺟﻠﺐ ﻣﻠﻒ اﻻﺗﺼﺎل ﺑﻘﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت‬

include("../../site.inc.php");
//‫ﺗﻨﻔﯿﺬ أﻣﺮ اﻻﺗﺼﺎل ﺑﻘﺎﻋﺪةاﻟﺒﯿﺎﻧﺎت‬
db_login();

//‫اﺧﺘﯿﺎر ﻋﻨﻮان اﻟﻤﻘﺎﻻت وﺟﻠﺒﮭﺎ ﻣﻦ اﻟﻘﺎﻋﺪه‬

$query = "SELECT id, title FROM news ORDER BY id DESC";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

//‫ﺟﻠﺐ ﻋﻨﺎوﯾﻦ اﻟﻤﻘﺎﻻت‬

if (mysql_num_rows($result) > 0) {

while($send = mysql_fetch_object($result)) {

echo" $send->title - <a href='edit.php?id=$send->id'>‫<ﺗﻌﺪﯾﻞ اﻟﻤﻘﺎل‬/a> - <a href='delete.php?

}

?>

</div>

‫ اﻟﺨﺎص ﺑﺘﻌﺪﯾﻞ اﻟﻤﻘﺎﻻت اﻟﻤﺨﺰﻧﮫ ﺑﺎﻟﻔﻌﻞ داﺧﻞ ﻗﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت‬edit.php ‫اﻟﺤﯿﻦ ﻧﻘﻮم ﺑﻌﻤﻞ ﻣﻠﻒ‬

‫ﺷﻮف اﻟﻤﻠﻒ وﺷﺮﺣﮫ ﺑﺪاﺧﻠﮫ‬

http://www.advphp.com/tuts/fullarticles/ 40/45
8/18/2016 php ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف‬

:Code ‫رﻣﺰ‬

<?
//‫ﺟﻠﺐ ﻣﻠﻒ اﻻﺗﺼﺎل ﺑﻘﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت‬
include("../../site.inc.php");

//‫ﻓﻰ ﺣﺎﻟﺔ ﻋﺪم اﻟﻀﻐﻂ ﻋﻠﻰ زراﻟﺘﺤﺪﯾﺚ ﺳﻮف ﯾﺘﻢ اﻻﺗﺼﺎل ﺑﻘﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت‬
if (!$submit)
{
db_login();

//‫اﺧﺘﯿﺎر ﻛﺎﻓﺔ اﻟﺒﯿﺎﻧﺎت ﻣﻦ ﺟﺪول اﻻﺧﺒﺎر‬

$query = "SELECT * FROM news WHERE id = '$id'";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

//‫اذا ﺗﻢ اﯾﺠﺎد ﻣﻘﺎﻻت ﻣﺨﺰﻧﮫ‬

if (mysql_num_rows($result) > 0)
{
// ‫ﺣﻮل ھﺬه اﻟﺒﯿﺎﻧﺎت اﻟﻤﺨﺰﻧﮫ ﻓﻰ ھﺬا اﻟﻤﺘﻐﯿﺮ‬
$send = mysql_fetch_object($result);

//‫اﻟﺨﻄﻮه اﻟﻘﺎدﻣﮫ ﻟﻌﻤﻞ اﻟﻔﻮرم ﺑﺪاﺧﻠﮫ اﻟﺒﯿﺎﻧﺎت اﻟﻠﻰ ﺳﯿﺘﻢ ﺟﻠﺒﮭﺎ ﻣﻦ ﺟﺪول اﻻﺧﺒﺎر‬
?>
<!-- ‫اﻟﺴﺎﺑﻖ ﻟﺠﻠﺐ اﻟﺒﯿﺎﻧﺎت ﻣﻦ اﻟﺠﺪول ﻻﺣﻆ ﺑﻨﻔﺴﻚ اواﻣﺮ اﻟﺒﻰ اﺗﺶ ﺑﻰ وﻛﯿﻒ ﺳﻨﺪﺧﻞ ﻟﻠﻤﺘﻐﯿﺮ‬
<div style="direction:rtl;">

<h3>‫<ﺗﻌﺪﯾﻞ اﻟﻤﻘﺎل‬/h3>
<form action="<? echo $PHP_SELF; ?>" method="POST">
<input type="hidden" name="id" value="<? echo $send->id; ?>">

‫ﻋﻨﻮان اﻟﻤﻘﺎل‬:<br ‫اﻟﻤﻘﺎل‬

/> ‫ﺑﺤﯿﺚ راح ﻧﺸﻮف ﺷﻜﻞ اﻟﺼﻔﺤﺔ ﻛﺎﻻﺗﻰ ﺑﻌﺪ زر ﺗﻌﺪﯾﻞ‬
<input size="50" maxlength="250" type="text" name="title" value="<? echo $send->title; ?>"><b

‫ﻧﺺ اﻟﻤﻘﺎل‬:<br />

<textarea name="content" cols="40" rows="10"><? echo $send->content; ?></textarea><br />
‫ﻛﺎﺗﺐ اﻟﻤﻘﺎل‬:<br />

<input size="50" maxlength="250" type="text" name="author" value="<? echo $send->author; ?>">

<input type="Submit" name="submit" value="‫>"ﺗﺤﺪﯾﺚ‬

</form>

</div>

<?
}
// ‫اذا ﻟﻢ ﯾﺘﻢ ﺟﻠﺐ اﯾﺔ ﺑﯿﺎﻧﺎت‬

else {
echo "<font size=-1>‫<ھﺬا اﻟﻤﻘﺎل ﻏﯿﺮ ﻣﻮﺟﻮد‬/font>";
}
}

// ‫ﺳﯿﺘﻢ ﺗﺤﺪﯾﺚ اﻟﺒﯿﺎﻧﺎت ﻓﻰ اﻻواﻣﺮ اﻟﻘﺎدﻣﮫ‬

else
{
delete.php ‫ﻧﺄﺗﻰ اﻻن ﻟﺼﻔﺤﺔ ﺣﺬف اﻟﻤﻘﺎﻻت واﺳﻤﮭﺎ‬

$errorList = array(); :Code ‫رﻣﺰ‬

$count = 0;

if (!$title) { $errorList[$count] = "Invalid entry: title"; $count++; }

if (!$content) { $errorList[$count] = "Invalid entry: content"; $count++; }

if (!$author) { $errorList[$count] = "Invalid entry: author"; $count++; }

http://www.advphp.com/tuts/fullarticles/ 41/45
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫?<‬
‫ﺟﻠﺐ ﻣﻠﻒ اﻻﺗﺼﺎل ﺑﻘﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت‪//‬‬
‫;)"‪include("../../site.inc.php‬‬
‫ﺗﻨﻔﯿﺬ ﻓﺎﻧﻜﺸﻦ اﻻﺗﺼﺎل اﻟﻤﻮﺣﻮده ﺑﺎﻟﻤﻠﻒ اﻟﺴﺎﺑﻖ اﻟﺬى ﺗﻢ ﺟﻠﺒﮫ ‪//‬‬
‫;)(‪db_login‬‬

‫ﺗﻨﻔﯿﺬ أﻣﺮ ﺣﺬف اﻟﻤﻘﺎل ﻣﻦ ﺟﺪول اﻻﺧﺒﺎر ‪//‬‬

‫;"'‪$query = "DELETE FROM news WHERE id = '$id‬‬
‫;))(‪$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error‬‬

‫رﺳﺎﻟﺔ ﺗﺄﻛﯿﺪ اﻟﺤﺬف ‪//‬‬

‫;">‪</a>.</font‬ﻋﻮدة ﻟﻘﺎﺋﻤﺔ اﻟﻤﻘﺎﻻت>‪ <a href=list.php‬ﺗﻢ اﻟﺤﺬف ﺑﻨﺠﺎح>‪echo "<font size=-1‬‬

‫>?‬

‫ﺑﮭﯿﻚ ﺗﻘﺮﯾﺒﺎ ﻧﻜﻮن اﻧﺘﮭﯿﻨﺎ ﻣﻦ اﻟﺼﻔﺤﺎت اﻟﺘﺤﻜﻢ اﻟﻤﻘﺎل ﻣﻦ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ‬

‫اﻟﺠﺰء اﻟﺮاﺑﻊ ‪ :‬ﺷﺮح طﺮﯾﻘﺔ ﻋﺮض اﻟﻤﻘﺎﻻت ﻋﻦ طﺮﯾﻖ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ ﺑﺎﻟﺮﺋﯿﺴﯿﺔ‬

‫طﺒﻌﺎ ﻛﺜﯿﺮ ﻣﻦ ﯾﺮﯾﺪ اﻟﺘﻌﺮف ﻋﻠﻰ ھﺬه اﻟﺨﻄﻮة ‪ ,‬وأﻧﺎ ﺳﻮف أﺷﺮﺣﮭﺎ ﻟﻜﻢ ﺑﺸﻜﻞ ﻣﺒﺴﻂ وﻣﻔﮭﻮم ﺑﺄذن ﷲ‬

‫اوﻻ‪ :‬ﺣﺘﻰ ﻧﻘﻮم ﺑﻌﺮض اﻟﻤﻘﺎﻻت اﻟﻤﺨﺰﻧﮫ ﻓﻰ ﻗﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت وﻋﺮﺿﮭﺎ ﺑﺎﻟﺮﺋﯿﺴﯿﺔ ‪ ,‬ﻋﻠﯿﻨﺎ ان ﻧﻘﻮم ﺑﺒﺮﻣﺠﺔ‬
‫ﻣﻠﻒ ﺧﺎص ﺑﺠﻠﺐ اﻟﺒﯿﺎﻧﺎت ﻣﻦ اﻟﻘﺎﻋﺪة‬

‫ﻟﺬﻟﻚ ﻗﻢ ﺑﻌﻤﻞ ﻣﻠﻒ اﺳﻤﮫ ‪ article.php‬داﺧﻞ ﻣﺠﻠﺪ اﻟﻤﻮﻗﻊ ‪final3‬‬

‫وھﺬا ھﻮ ﻛﻮده ‪:‬‬

‫رﻣﺰ ‪:Code‬‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪42/45‬‬
8/18/2016 php ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف‬

<?
include("site.inc.php");

db_login();

//Generate the query so we can retrieve all titles in the DB in descending ID order

$query = "SELECT id,title,content,author,date FROM news ORDER BY id DESC";

$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// if records are present

if (mysql_num_rows($result) > 0) {

while($send = mysql_fetch_object($result)) {
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>
</head>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<?php
echo"$send->content";

:‫ﺷﺮح اﻟﻤﻠﻒ‬
?>
‫اﻻﺗﺼﺎل ﺑﻘﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت وﺟﻠﺐ ﻛﺎﻓﺔ أﻋﻤﺪة ﺟﺪول اﻻﺧﺒﺎر‬-1
</td>
</tr>
<tr>
<?Php :Code ‫رﻣﺰ‬
echo "$send->author";
}} include("site.inc.php");
?>
db_login();
</tr>
<br>
$query = "SELECT id,title,content,author,date FROM news ORDER BY id DESC";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());
</table>

‫وﺳﻨﺨﺰن ھﺬه اﻟﻤﻘﺎﻻت اﻟﺘﻰ ﺗﻢ ﺟﻠﺒﮭﺎ ﻓﻰ‬, ‫ﻟﻮ ﺗﻢ اﯾﺠﺎد ﻣﻘﺎل ﺳﻮف ﯾﺘﻢ ﻋﻤﻞ ﻟﻮب ﻟﺠﻠﺐ ﻛﺎﻓﺔ اﻟﻤﻘﺎﻻت‬-2
$send ‫اﻟﻤﺘﻐﯿﺮ‬

:Code ‫رﻣﺰ‬

if (mysql_num_rows($result) > 0) {

while($send = mysql_fetch_object($result)) {

‫ ﻟﻨﻘﻮم ﺑﺠﻠﺐ ﻣﺤﺘﻮى وﻛﺎﺗﺐ اﻟﻤﻘﺎل‬,‫ اﻟﻠﻰ ﺧﺰﻧﺎ ﺑﮫ اﻟﻤﻘﺎﻻت‬send ‫ واﻟﺬى ﺑﺪاﺧﻠﮫ ﺳﻮف ﻧﻘﻮم ﺑﺎﻟﺪﺧﻮل ﻟﻠﻤﺘﻐﯿﺮ‬table ‫ ﺳﻮف ﻧﻘﻮم ﺑﻌﻤﻞ ﺟﺪول‬,‫ﺑﺪاﺧﻞ ھﺬا اﻟﻠﻮب‬-3

:Code ‫رﻣﺰ‬

http://www.advphp.com/tuts/fullarticles/ 43/45
8/18/2016 php ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف‬

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>
</head>
<table cellpadding="0" cellspacing="0">

<tr>
<td>
<?php
echo"$send->content";

?>
</td>
</tr>
<tr>
<?Php
echo "$send->author";
}}
?>

</tr>
<br>

</table>
,‫اﻟﺤﯿﻦ ﻧﻜﻮن اﻧﺘﮭﯿﻨﺎ ﻣﻦ ﺑﺮﻣﺠﺔ ھﺬا اﻟﻤﻠﻒ‬

‫ وﻧﻘﻮم ﺑﻔﺘﺤﮫ‬index.php ‫ ﻧﺮوح ﻟﻤﻠﻒ اﻻﻧﺪﻛﺲ اﻟﺮﺋﯿﺴﻰ ﻟﻠﻤﻮﻗﻊ ﻧﻔﺴﮫ‬, ‫ﺑﻌﺪ ھﯿﻚ‬

‫ ﻟﯿﻘﻮم ﺑﻌﺮض اﻟﻤﻘﺎﻻت اﻟﻤﺨﺰﻧﮫ‬article.php ‫وﺳﻮف ﻧﻘﻮم ﺑﻌﻤﻞ اﻧﻜﻠﻮد ﻟﺠﻠﺐ اﻟﻤﻠﻒ اﻟﺴﺎﺑﻖ‬
‫ﺑﻘﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت‬

:Code ‫رﻣﺰ‬

<div id="content">

<a href="#"><h3>||‫<||اﻟﻤﻘـﺎﻻت اﻟﻤﻀﺎﻓﺔ ﺣﺪﯾﺜﺎ‬/h1></a>

<?php

include("article.php");

?>

</div>

........ ‫ ﻣﺎﺣﺒﯿﺖ اﺿﻌﮫ ﻻﻧﮫ ﺗﻢ ﺷﺮﺣﮫ ﻓﻰ اﻟﺪروس اﻟﺴﺎﺑﻘﮫ‬index.php ‫طﺒﻌﺎ ﺑﻘﯿﺔ ﻛﻮد‬

‫ ﺳﻮف ﺗﻈﮭﺮ ﻟﻚ اﻟﻤﻘﺎﻻت اﻟﻤﺨﺰﻧﮫ ﺑﻘﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت‬, ‫ ﻣﺒﺮوك ﻋﻠﯿﻚ‬, ‫ﻓﻰ اﻟﻨﮭﺎﯾﺔ‬

http://www.advphp.com/tuts/fullarticles/ 44/45
‫‪8/18/2016‬‬ ‫ﺗﻌﻠم ﻛﯾف ﺗﻘوم ﺑﺑرﻣﺟﺔ ﻣوﻗﻊ ﺑﻧﻔﺳك ﻣن اﻟﺻﻔر ﻟﻼﺣﺗراف ‪php‬‬

‫ﻟﺘﺤﻤﯿﻞ ﻣﻠﻔﺎت اﻟﻤﻮﻗﻊ ﻛﺎﻣﻠﺔ ‪ :‬اﺿـــﻐــــﻂ ھــــﻨـــــﺎ‬

‫ﺗﺮﻗﺒﻮا اﻟﺘﻄﻮﯾﺮ اﻟﻘﺎدم ‪ ,‬وﻓﯿﮫ ﺳﻮف ﻧﻘﻮم ﺑﺘﺠﻤﯿﻞ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ واﺿﺎﻓﺔ ﺗﺤﺴﯿﻨﺎت ﺑﺮﻣﺠﯿﺔ أﻓﻀﻞ ﺑﻜﺜﯿﺮ‬

‫ﺑﺎﻟﺘﻮﻓﯿﻖ‬

‫ﻋﻮده ﻟﻼﻋﻠﻰ↑‬

‫‪http://www.advphp.com/tuts/fullarticles/‬‬ ‫‪45/45‬‬