Ինչպես զրոյից կայք կառուցել PHP-ով

Ստացե՞լ եք PHP-ի հիմունքները և պատրա՞ստ եք ընդունելու սկսնակ մարտահրավեր: Փորձեք զրոյից կայք կառուցել այս ձեռնարկով:

Եթե դուք ձեռք բերեք հիմնական հասկացողություն, թե ինչպես կարելի է վեբ կայք կառուցել PHP-ի միջոցով, դուք կունենաք գիտելիքներ ֆայլերի ընդգրկման և արտադրանքի արտադրության մասին՝ վեբ էջը հարմարեցնելու հենց հիմունքները: Գուցե դուք մտածում եք, թե որտեղից սկսել, կամ ինչ հաջորդ քայլեր ձեռնարկել ձեր կայքում ավելի շատ ֆունկցիոնալություն ստեղծելու ժամանակ:

Այս ձեռնարկում ես ներկայացնում եմ կայքի պարզ կառուցվածք, որը թույլ է տալիս ուղղակի թարմացումներ: Այն նաև ցույց է տալիս որոշ օգտակար PHP ֆունկցիաներ՝ արժեք ավելացնելու համար:

Կայքը, որը դուք կկառուցեք PHP-ում

Նմուշ կայքէջը, որը հասանելի է GitHub-ի պահոցում, պարզ կայք է թռչունների մասին՝ իրենց բոլոր փետրավոր բարությամբ: Կան մի քանի բաժիններ, որոշ տեղեկատվական էջեր և գլխավոր էջ: Վերջնական կայքը այնքան կարևոր չէ, որքան այն տեխնիկան, որի մասին կկարդաք, և այն գաղափարները, որոնք դրանք կարող են ներշնչել ձեզ:

Եթե կարող եք, ներբեռնեք կայքը GitHub-ից և տեղադրեք այն ձեր տեղական համակարգչում նախքան շարունակությունը կարդալը:

Կայքի ընդհանուր կառուցվածքը

Ահա մի քանի հիմնական ֆայլեր և գրացուցակներ, որոնք դուք պետք է ուսումնասիրեք:

composer.json
data/
funcs.php
md/
site/
 index.php
tpl/

Յուրաքանչյուր էջ համապատասխանում է կայքի գրացուցակի PHP սկրիպտին: Սա որոշակի ավելորդություն է ներկայացնում, բայց ամեն ինչ պարզ է դարձնում: Ձեր վեբ սերվերը կարգավորելիս համոզվեք, որ ձեր DOCROOT-ը ուղղորդել եք կայքի գրացուցակի վրա:
md գրացուցակը պարունակում է նշման սկզբնաղբյուր ֆայլեր, որոնք պահում են որոշ առանձին էջերի հիմնական բովանդակությունը:
tpl գրացուցակը պարունակում է ձևանմուշներ և ֆայլեր, որոնք սահմանում են ընդհանուր HTML կառուցվածքը, որը կարող է մի քանի էջ կիսվել:
PHP ֆունկցիոնալության մեծ մասը գտնվում է funcs.php-ում:

Ինչպես է աշխատում կայքը

Bootstrap

Bootstrap-ը վեբկայքեր կառուցելու համար նախատեսված ֆրոնտային շրջանակ է: Այն ունի ներկառուցված ոճեր և JavaScript ֆունկցիոնալություն՝ ծածկելով վեբ մշակողների ամենատարածված կարիքները: Դա հիանալի միջոց է կայքը արագ գործարկելու և գործարկելու համար՝ նախքան դիզայնը ճշգրտելու ժամանակ ծախսելը:

Դուք կարող եք տեղադրել և հյուրընկալել Bootstrap ֆայլերը ձեր սերվերի վրա, բայց առավելագույն արագության համար կարող եք պարզապես հղում կատարել դրանք CDN-ից: Նայեք tpl/head.php և դուք պետք է տեսնեք օրինակ, ինչպիսին է.

<link
   href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
   rel="stylesheet"
   integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
   crossorigin="anonymous"
/>

Հիմնական ձևանմուշ

Սկսեք site/index.php-ով: Սա այն ֆայլն է, որը ներկայացնում է կայքի գլխավոր էջը: Կախված նրանից, թե ինչպես է ստեղծվել ձեր վեբ սերվերը, դուք պետք է կարողանաք մուտք գործել այն http://yoursite.example.org/ կամ, եթե դա չհաջողվի, http://yoursite.example.org/index.php:

Նկատի ունեցեք, որ երկուսը ներառում են հենց այս ֆայլի սկզբում՝ funcs.php և TPL_DIR."/home.php": funcs.php ֆայլը սահմանում է TPL_DIR հաստատունը՝ որպես կայքի վերին մակարդակի tpl գրացուցակի ամբողջական բացարձակ ճանապարհ:

Նայեք tpl/home.php-ին: Սա html փաստաթղթի ամենաարտաքին կմախքն է. այն ներառում է միայն doctype և HTML տարր: HTML տարրի շրջանակներում այն օգտագործում է երկու ընդգրկում՝ գլուխը և մարմինը ներկայացնող ձևանմուշների համար:

<!DOCTYPE html>
<html lang="en">
    <?php include TPL_DIR."/head.php"; ?>
    <?php include TPL_DIR."/home/body.php"; ?>
</html>

Ի հակադրություն, թռչունների բաժնի ձևանմուշը բեռնում է մարմնի այլ ձևանմուշ՝ tpl/birds/body.tpl: Սա պարունակում է այդ հատվածի էջերի այլ դասավորություն՝ կողագոտով:

Վերլուծություն Markdown

composer.json ֆայլում պահանջվում է երրորդ կողմի գրադարան, որը կոչվում է erusev/parsedown: Սա Markdown վերլուծող գրադարան է: Այն թույլ է տալիս շատ հեշտությամբ Markdown տեքստը փոխակերպել HTML-ի:

Շատ ստատիկ կայքեր ստեղծում են վերջնական HTML այլ լեզվով գրված փաստաթղթերից, ինչպիսին է Markdown-ը: Այն առաջարկում է ավելի լավ շարահյուսություն հեղինակելու համար, որն ավելի ընթեռնելի է, քան HTML-ը: Նմուշի կայքը սա ներկայացնում է որպես տարբերակ: Նայեք show_content() ֆունկցիային funcs.php-ում:

function show_content() {
    $file = MD_DIR.PAGE.'.md';
    
    if (file_exists($file)) {
        $Parsedown = new Parsedown();
        echo $Parsedown->text(file_get_contents($file));
    } else if (function_exists("content")) {
        echo content();
    }
}

Եթե պահանջվող էջին համապատասխան Markdown ֆայլ կա, ապա Parsedown օբյեկտը փոխակերպում է դրա բովանդակությունը HTML-ի և թողարկում: Եթե Markdown ֆայլ չկա, ապա դրա փոխարեն գործառույթ է փնտրում content() անունով: Առանձին էջերը կարող են սահմանել այս գործառույթը (օրինակ՝ տես site/index.php), եթե դրանց բովանդակությունը պետք է գերազանցի այն, ինչ կարող է հասնել ստատիկ Markdown-ը:

Մետատվյալների բեռնում

Նայեք get_json ֆունկցիային funcs.php-ում.

function get_json($file) {
    $data_file = DATA_DIR."/".$file;
    if (!file_exists($data_file)) {
        return array();
    }
    if (($json = file_get_contents($data_file)) === false) {
        return array();
    }
    if (($out = json_decode($json, true)) === null) {
        return array();
    }
    return $out;
}

Ըստ էության, ֆունկցիան կանչում է ևս երկուսին` տվյալ ֆայլից տվյալներ վերցնելու և վերլուծելու համար: Այն հագեցնում է բազմաթիվ սխալների ստուգում, որպեսզի վերադարձնի դատարկ զանգվածը, եթե ինչ-որ բան սխալ լինի: json_decode()-ն այսպես կանչելը վերադարձնում է ասոցիատիվ զանգված, որը շատ հեշտ է դարձնում տվյալների հետ անմիջապես աշխատելը: Այս մոտեցումն այնքան հարմար է, որ դուք կարող եք գերադասել այն տվյալների բազայից օգտվելուց, հատկապես պարզ առաջադրանքների համար, ինչպիսին է գլոբալ կազմաձևումը:

Կայքն օգտագործում է երկու մետատվյալների ֆայլ՝ data/titles.json և data/featured.json: Առաջինը պահպանում է յուրաքանչյուր էջի վերնագիրը, որն օգտակար է ավտոմատ կապելու և այլ դեպքերում:

{
    "/": "Home",
    "/about": "About",
    "/birds": "Bird profiles",
    ...
}

Սա բոլոր էջի վերնագրերը մեկ տեղում (ֆայլ) պահելու հարմար միջոց է, որը հեշտ է թարմացնել, երբ դա անհրաժեշտ է: Այս վերնագրերը նպաստում են նավարկությանը վերևի ընտրացանկում, հացաթխման ցանկում և կողային վահանակներում:

function page_title($page = PAGE) {
    $titles = get_titles();
    return array_key_exists($page, $titles) ? $titles[$page] : basename($page);
}

Ահա breadcrumbs() ֆունկցիայի առաջին մասը (funcs.php-ից), որը կառուցում է էջի վերնագրերի զանգված URL-ի յուրաքանչյուր մասի համար: Օրինակ, /birds/blue-tit էջի համար այն վերցնում է վերնագիրը / էջի համար, այնուհետև վերնագիրը /birds, ապա վերջապես վերնագիրը /birds/blue-tit: Այնուհետև հացաթխման ցուցակը բաղկացած կլինի մեկ հղումից՝ հիերարխիայի յուրաքանչյուր էջի համար:

function breadcrumbs() {
    $items = array();
    $titles = get_titles();
    $parts = explode("/", PAGE);
    $href = "";
    foreach ($parts as $part) {
        $href .= ($href == "/" ? "" : "/").$part;
        $items[$href] = $titles[$href];
    }
    ...
}

Այլ մետատվյալների տիրապետում

Եթե դիտում եք Մասին էջը, որոշակի նորություն կամ թռչնի հատուկ պրոֆիլ, դուք պետք է կարողանաք տեսնել Վերջին թարմացված հաղորդագրությունը ստորաէջում: Կայքի էջատակը պահվում է tpl/footer.php-ում: Բացեք այս ֆայլը և նշեք PHP-ի հատվածը դրա ներսում.

if (file_exists($file = MD_DIR.PAGE.'.md')) {
    echo 'Last updated: '.date('r', filemtime(MD_DIR.PAGE.'.md'));
}

Սա մետատվյալների ուղղակիորեն ֆայլից վերցնելու պարզ օրինակ է, այլ ոչ թե տվյալների բազայից կամ այլ աղբյուրից: filemtime ֆունկցիան վերադարձնում է ֆայլի վերջին փոփոխված ժամանակը: Նկատի ունեցեք, որ սա շատ հարմար մեթոդ է բովանդակության ամսաթիվը ստանալու համար, բայց դա առանց թերությունների չէ:

Տվյալների արդյունահանում կանոնավոր արտահայտությունների միջոցով

Հաճախ անհրաժեշտ է վերօգտագործել բովանդակությունը կայքում, օրինակ՝ բովանդակության էջում նորությունների ամփոփագրեր ցուցադրելու համար: Ամբողջական CMS-ով դուք կարող եք պահել այս տվյալները որպես լրացուցիչ դաշտեր տվյալների բազայում: Պարզ հարթ մոտեցմամբ դուք պետք է այլ կերպ մտածեք:

Այս կայքի նորությունները պահվում են որպես Markdown ֆայլեր, ուստի չմշակված բովանդակությունը հասանելի է: Կանոնավոր արտահայտությունները հարմար գործիք են մշակողի հավաքածուում, որը ձեզ հնարավորություն է տալիս համապատասխանեցնելու և հանելու բովանդակությունը: news/index.php ֆայլը հենց դա է անում իր բովանդակությունը ցույց տալու համար: Այն վերցնում է յուրաքանչյուր ֆայլի բովանդակությունը md/news գրացուցակում որպես տող: Այնուհետև այն գործարկում է մի քանի կանոնավոր արտահայտություններ՝ տվյալներ հանելու համար:

Վերնագիրը տող է, որը սկսվում է # նշանով, ըստ Markdown շարահյուսության: Այնուհետև հետևում է կամընտիր բացատ, մինչև իրական վերնագիրը: Կանոնավոր արտահայտությունը ^#\s+(.+) համապատասխանում է տեքստի այդ օրինակին, իսկ preg_match() վերադարձնում է այն ամենը, ինչ համընկել է փակագծերի միջև՝ վերնագիրը:

if (preg_match("/^#\s+(.+)/", $contents, $matches)) {
    $title = $matches[1];
}

Հետևում են ևս երկու կանոնավոր արտահայտություններ՝ նորությունների նշման ֆայլից պատկերը և առաջին նախադասությունը հանելու համար: Այս մոտեցման բացասական կողմեր կան. Մասնավորապես, այն պահանջում է կարգապահություն՝ ապահովելու համար, որ Markdown ֆայլերը միշտ ձևաչափվեն ճիշտ այնպես, ինչպես ակնկալում է կոդը:

Ընտրելով պատահական բովանդակություն

/birds էջը շատ բան չի անում, այնպես որ պատահական թռչնի պատկերը աշխուժացնում է այն: Սա հեշտ է հասնել ֆայլային համակարգի մի փոքր ստուգման և PHP-ում ներկառուցված գործառույթի միջոցով: Հմայքը տեղի է ունենում site/birds/index.php-ում.

function content() {
    $files = scandir(SITE_DIR."/img");
    $files = array_filter($files, function($file) { return $file[0] != '.'; });
    $file = $files[array_rand($files)];
    
    echo '<h1>Birds</h1>';
    echo '<img src="/img/'.$file.'" />';
}

Խաբեությունն այն է, որ այս հատուկ գործառույթի բոլոր պատկերները մեկ գրացուցակի մեջ կազմակերպվեն: Այնուհետև scandir() ֆունկցիան կարդում է ֆայլերը այս գրացուցակից զանգվածի մեջ, և array_rand() մեզ տալիս է պատահական բանալի զանգվածից, որպեսզի ֆունկցիան կարողանա ընտրել առանձին ֆայլ:

Կայքերի կառուցում և հմտություն PHP-ում

Հուսով եմ, որ դուք գոնե մեկ նոր բան եք սովորել այս հոդվածից: Ավելի կարևոր է, հուսով եմ, որ այն ձեզ ոգեշնչել է դիտարկել տարբեր մոտեցումներ և ցույց տվել, թե ինչպես կարող եք օգտագործել PHP-ն տարբեր ձևերով:

Երբ դուք ծանոթանաք PHP-ին, կսկսեք մտածել յուրաքանչյուր խնդրի այլընտրանքային լուծումների մասին: Սա բնական առաջընթաց է և նշանակում է, որ դուք սկսում եք ավելի բարձր մակարդակով մտածել՝ ավելի քիչ կենտրոնանալով հենց ծրագրավորման լեզվի վրա և ավելի շատ այն բանի վրա, թե ինչ կարող եք անել դրա հետ: