Бидэнд манай сайтын агуулгыг хадгалах бааз бий болсон тул PHP кодоо боловсруулах цаг ирлээ. Манай АУС -ийн төрөл бүрийн мэдээллүүдийг хадгалж байх тохиргооны файлаас эхлэе. Энэхүү файлыг манай системийн бусад программууд ашиглах юм. Эхлээд бид веб сервер дээрээ сайтыг байршуулах хавтсаа үүсгэх хэрэгтэй. Би энэ зорилгод G:/mysites/site2/www гэсэн хавтасыг авсан. Учир нь Виртуал хост үүсгэхдээ сонгосон хавтас байгаа юм. Дахин нэг хавтас нээгээд виртуал хостын тохиргоо хийх нь илүүц. Та өмнөх хичээлүүдийг үзсэн бол та ч бас сайтаа байршуулах хавтасаа сонгосон байх. Энэ хавтас манай АУС -ийн бүх файлуудыг агуулах юм. G:/mysites/site2/www хавтас дотроо config.php нэртэй файл үүсгээд доорх кодыг оруулан өгнө.

1-р хичээлд сайтын агуулгыг хадгалах баазыг MySql серверт үүсгэн өгсөн болохоор төлөвлөгөөний дагуу articles хүснэгтийг үүсгэх ажлыг эхлэе. Манай өгөгдлийн сан ганцхан хүснэгттэй байна. Цуврал хичээлийн зорилго бол маш энгийн агуулгын удирдах системийг хийх. Том хэмжээтэй олон хүснэгт бүхий систем хийх нь таны цаашдын зорилго болно. Өгөгдлийн санд хандан агуулгыг татан аваад түүнийгээ хэрэглэгчид үзүүлэх, өгөгдлийн сандаа мэдээлэл оруулан засварлах ажиллагаа бол динамик сайтын ажиллагааны үндсэн зарчим. Энэ бүгдийг ойлгоход цуврал хичээлүүд хангалттай мэдлэгийг өгч чадна.

Php хэлийг ашиглан веб сайт хийх ажил шинээр эхэлж байгаа хүмүүст ойлгомж муутай санагдах нь элбэг тохиолдоно. C# NET, Visual Studio зэрэг дээд түвшингийн хэлний фреймворк ашиглан хэрэглэгчийн компьютерт суулган ажилладаг программ зохиож байсан хүмүүст веб сайт боловсруулах ажил эхлээд их төвөгтэй мэт санагдана. Учир нь Php, MySql ашиглан сайт хийхийн тулд та сервер болон хэрэглэгчийн талын бүх зүйлээ өөрөө хийх хэрэгтэй болдог. Ийм хэмжээний ажлыг кодлон веб сайт боловсруулна гэвэл мэдээжээр их хугацаа орох нь ойлгомжтой. Тэгвэл сайтыг хэрхэн хурдан боловсруулах вэ? гэсэн асуулт гарч ирдэг. Энд л Php фреймворк, Агуулгын удирдах систем буюу CMS (Content management system) гэсэн ойлголт гарч ирдэг.

Компьютерт локал веб сервер суулгах хичээлээр \xampp\htdocs\ хавтаст сайтын нэр бүхий хавтас үүсгээд сайтаа байршуулан туршин үзсэн. Энэ арга нь дараах дутагдалтай.

• Та сайтаа ачааллахдаа http://localhost/blog/ байдлаар хандах болно. Гэхдээ хэдийгээр локал гэсэн ч сайтад хандахдаа www.blog.mn байдлаар хандах нь хамаагүй ойлгомжтой бас илүү бодитой харагдана.
• Сайтын файлуудаа систем байрлах диск дээр байршуулах нь тийм ч сайн арга биш
• Та ганцхан сайттай ажиллаад байхгүй цаашдаа локал сайтын тоо олон болох үед хаяглалд хүндрэл үүсэх магадлалтай.

Иймд бид локал сервер дээр виртуал хостын тохиргоог хийж сурах хэрэгтэй. Ингэснээр дээрх хүндрэлүүдийг үүсгэхгүй байх боломжтой.

Сайтын хуудсыг хэлбэржүүлэх цувралын сүүлчийн хичээлээр бид сайтын ажиллагаанд jQuery ба Cufón -ыг хэрхэн ашиглах талаар үзэх болно. Бид сайтын h1, h2, h3, h5 түвшингийн гарчигуудад Myriad Pro гэсэн хэрэглэгчийн компьютерт үйлдлийн системтэй хамт суудаггүй стандарт бус фонтыг ашигласан. Бас сайтад слайдшоуг ажиллуулах хэрэгтэй байгаа. Энэ зорилгоор JavaScript -ыг ашиглах юм. Сайтдаа өөрийн хүссэн дурын фонтыг ашиглаад энэ нь хэрэглэгчийн талд суугдаагүй байсан ч сайтыг зөв харагдуулах боломжтойг үзүүлэх зорилгоор бид Myriad Pro фонтыг гарчигт ашигласан. Хэрэглэгч JavaScript -ыг хаасан байхад сайт бидний тодорхойлсон нөөц фонтоор үзэгдэх юм.

Энэ хичээлээр бид сайтын CSS кодчлолыг дуусгах болно. Манай сайтын дизайн бараг дуусч байгаа ба бид одоо сайтын хөл хэсгийн хэлбэржүүлэлтийг хийх үлдсэн. Хөл хэсэг зураг болон текстийн хоёр хэсгээс бүрдэнэ. Зургийг гаргахын тулд Footer -> Image бүлэгт ороод background, image үеүүдийг нэгтгээд хуулаад шинэ файлд оруулаад footer-image.jpg нэрээр хадгална. Зургийн хувьд PNG форматаар том хэмжээтэй гарах тул jpg -г сонгоорой. Толгой хэсгийн зургийг гаргасантай адил тул нарийн тайлбар хийхгүй.

Веб сайт хийж сурахын тулд танд веб сервер хэрэгтэй болно. Сурахын тулд хостинг худалдаж авах нь мэдээж зохимжгүй. Нилээд сайн дадлагажиж байгаад дараа нь сайтаа хийснийхээ дараа интернетэд байрлуулахдаа хостинг авсан нь хэмнэлттэй. Тэгвэл сайтын ажиллагааг хаана туршин зүгшрүүлэх вэ? гэсэн асуулт гарч ирнэ. Үүнийг бид өөрийн компьютераа веб сервер болгон ашиглах замаар хийж болно. Энэ зорилгод XAMPP пакет бүрэн нийцнэ. Энэ тухай би Php хичээлийн эхэнд дурдсан байгаа. Сайтын хэрэглэгчид пакетыг хэрхэн суулгах талаар нилээд асууж байгаа тул энэхүү постыг орууллаа.

Сайтын удирдах цэсийг хийснээр агуулгын блокийн эхний хэсгийг кодолж дууссан. Одоо бид агуулгын контейнерын хоёрдахь хэсэг болох блог болон твиттерийн хэсэгт орно. Энэ хэсэг бол манай PSD макетын   

хэсэг юм. Html кодод id="page-wrapper" блокийн араас байрлах ба хөтөч дээр блокууд ердийн урсгалаар байрласан байгаа.

Өмнөх хичээлд бид цэсэнд зориулан спрайт хийсэн. Цэсэнд дэвсгэр зураг ашиглахын өмнө түүнийг баруун тийш байрлуулах хэрэгтэй. Бид 4-р хичээлд id="content" блокт position: relative; шинжийг өгсөн. Одоо энэ шинж бидэнд хэрэгтэй болно. Агуулгын блоктой харьцангуй байрлалыг ашиглан бид цэсийг өөрийн хүссэн газар руу хөдөлгөх болно. Өөрөөр хэлбэл агуулгын төв хэсгийн баруун дээд булан руу шилжүүлэх болно. Энд 0, 0 координат бол хөтөчийн цонхны зүүн дээд булан биш харин content блокийн зүүн дээд булан гэснийг илэрхийлнэ.

Өмнөх хичээлд бид дараалалаа багахан зөрчин удирдах цэсний кодлолыг орхин сайтын төв хэсгийн кодлолыг хийсэн. Энэ хичээлээр бид сайтын удирдах цэсний хэсгийн кодлолыг хийх болно.

Удирдах цэс

Удирдах цэсийг хийх нь нилээд хүндэвтэр. Бид нилээд нарийн цэс ашиглана дээр нь цэс баруун талдаа шахан байрлах нь асуудлыг улам хүндрүүлж байгаа. Гэхдээ цэсийг фотошоп дээр хийсэн байгаа болохоор бидэнд бага зэргийн хөнгөн болж ирнэ.