Jump to content
php.lv forumi

Vienkārša vizītkartes tipa tīmekļa vietnes izstrāde soli pa solim (HTM


Aikss

Recommended Posts

Ir juridisku pakalpojumus sniedzošs uzņēmums, kas vēlas sev vizītkartes tipa mājas lapu, kura satur trīs sadaļas: par mums, pakalpojumi, kontakti un rekvizīti.

 

Tā kā veidojam statisku vizītkartes tipa vietni ar maziņu saturu, tad visu kodu liksim vienā failā. Izveidojam index.php failu teksta redaktorā (piemēram, notepad++) un saglabājam uz servera.

 

Sākam rakstīt kodu. Pašā sākumā ieslēdzam kļūdu paziņošanu un sākam rakstīt html struktūru: iekopējam xhtml strict doctype un html rindiņu, uzrakstām head un body tagus.

 

 

<?php

//  Error Reportning (E_ALL - all error, 0 - turn off error reporting)
error_reporting(E_ALL);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="lv" lang="lv">

 <head>
 </head>

 <body>
 </body>

</html>

 

Lai varētu darboties tālāk ir jāzina kura lappuse tiek skatīta un, ja ir neatbilstoša lappuse, tad pārmest uz sākumu.

 

 

// Init $page. Redirect if wrong page.
$page = '';
if (isset($_GET['page'])) {
 if (in_array($_GET['page'], array('pakalpojumi', 'kontakti-un-rekviziti'))) {
   $page = $_GET['page'];
 } else {
   header('Location: http://localhost/');
 }
}

 

Piezīme. Pārmešana uz sākumu nepareizas adreses gadījumā, nav tas labākais variants, jo tas var samulsināt apmeklētāju. Tā vietā būtu jāizmanto kļūdas paziņojums. Vietnei, kurai ir trīs lappuses, neredzu īsti jēgu un nepieciešamību taisīt kļūdas paziņojumu. Ja nu tomēr ļoti gribās, tad var pārmetot pielikt atzīmi galā un sākuma lappusē parādīt nelielu kļūdas paziņojumu.

 

...
} else {
 header('Location: http://localhost/?error=404');
}
...
if (isset($_GET['error']) AND (int)$_GET['error'] == 404) {
 echo '<p class="error">Jūs tikāt pārmests uz sākumu, jo jūsu pieprasīta adrese ir nepareiza!</p>';
}

 

Tālāk inicializējam un atbilstoši lappusei piešķiram vērtību vietnes nosaukumam un meta datiem. Piezīme. Ir dažādi viedokļi par meta keywords/dercription tagu nozīmi. Cik nu ir izskanējis, tad google vispārīgi vairs neskatās meta tagus, tomēr citi, piemēram, Yahoo, lielākā vai mazākā mērā viņus skatās.

 

// Init $title, $meta_key, $meta_desc
$title = 'Test title, fusce elementum ...';
$meta_key = 'Test keywords, habitant, morbi tristique ...';
$meta_desc = 'Test description, placerat nec pulvinar ...';
if ($page == 'pakalpojumi') {
 $title = 'Test title for pakalpojumi, fusce elementum ...';
 $meta_key = 'Test keywords for pakalpojumi, habitant, morbi tristique ...';
 $meta_desc = 'Test description for pakalpojumi, placerat nec pulvinar ...';
} else if ($page == 'kontakti-un-rekviziti') {
 $title = 'Test title for kontakti, fusce elementum ...';
 $meta_key = 'Test keywords for kontakti, habitant, morbi tristique ...';
 $meta_desc = 'Test description for kontakti, placerat nec pulvinar ...';
}

 

Aizpildām head daļu ar informāciju par vietni (title, meta data), kā arī norādām favicon un css failus. Norādītos failus arī ieliekam (icon) vai izveidojam (CSS). Base tags norāda noklusēta adresi visām saitēm, kas ir vietnē. Mape "c-side" ir domāta kā client-side, jeb mape, kas satur clienta puses lietas, kā bildes, css un js failus, flash un tā tālāk. Par konkrētu tagu un to atribūtu lietošanu sīkāk lasiet kādā uzziņā ("(x)HTML Reference").

 

 

  <head>

   <title><?php echo $title; ?></title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="description" content="<?php echo $meta_desc; ?>" />
     <meta name="keywords" content="<?php echo $meta_key; ?>" />
   <base href="http://localhost/" />
     <link rel="shortcut icon" type="image/x-icon" href="c-side/favicon.ico" />
     <link rel="stylesheet" type="text/css" href="c-side/general.css" />

 </head>

 

Tālāk tad ir jāaizpilda body daļa, iesākumā sadalīsim visu blokos: augša (top), vidus (middle) un apakša (bottom). Augša saturēs navigāciju, vidus saturu, apakšā atsauci. Ierakstām augšas daļā sarakstu ar saitēm, kas kalpos kā galvenā navigācija.

 

  <body>

   <div id="top">

     <ul>
       <li><a href="/">Sākums</a></li>
       <li><a href="?page=pakalpojumi/">Pakalpojumi</a></li>
       <li><a href="?page=kontakti-un-rekviziti/">Kontakti un Rekvizīti</a></li>
     </ul>

   </div>

   <div id="middle">
   </div>

   <div id="bottom">
   </div>

 </body>

 

No šīs vietas tad var sākt skatīties un testēt uzrakstīto kodu. Uzspiežam uz pakalpojumiem (pēc tam arī uz kontaktiem) un paskatāmies vai vietnes nosaukums un "page source" redzamie meta dati mainās atbilstoši adresei. Pēc tam no adreses lodziņa nodzēšam no beigām kādu burtu un paskatāmies vai mūs aizmet uz sākumu. Garumzīmes nerāda kā nākas? Head daļā mums ir meta tags, kas norāda kodējumu. Vēl bez tā pirms html ieliekam rindiņu, kas aizsūtīs pārlūkam ziņu par satura kodējumu. Kā arī neaizmirstam, ka failam jābūt saglabātam "UTF-8 without BOM". (Notepad++ reizēm mēdz formatējumu pārslēgt pats, tā kā, ja pēkšņi nerāda garumzīmes/mīkstinājuma zīmes, vajag paskatīties, ko rāda "Format".)

 

 

...
//  Charset Header
header('Content-Type: text/html; charset=utf-8');

?>

 

Izveidojam if struktūru un liekam saturu starp atbilstošiem html tagiem iekšā.

 

    <div id="middle">

<?php if ($page == '') { ?>
<h1>SIA "Mauris egestas"</h1>
 <p>SIA "<strong>Mauris egestas</strong>" aliquam ut est et odio
   consequat lacinia [...] faucibus</p>
 <p>Orci luctus [...] odio posuere  <strong>Vestibulum Ante</strong>
 dignissim nulla sodales vitae.</p>

<?php } else if ($page == 'pakalpojumi') { ?>
<h1>Pakalpojumi</h1>
 <h2>Scelerisque semper pakalpojumi:</h2>
   <ul>
     <li>Aliquam ut est et odio consequat lacinia.</li>
     [...]
   </ul>
 <h2>Praesent fringilla convallis molestie:</h2>
   <ul>
     [...]
   </ul>

<?php } else if ($page == 'kontakti-un-rekviziti') { ?>
<h1>Kontakti un Rekvizīti</h1>
 <h2>Kontakt informācija</h2>
   <table>
     <col span="1" />
     <col span="2" />
     <tr>
       <td>Tālruņi</td>
       <td>12345678; 12345678;</td>
     </tr>
     <tr>
       <td>E-pasts:</td>
       <td>test@localhost, info@localhost</td>
     </tr>
     [...]
   </table>
 <h2>Asistente</h2>
   <table>
     [...]
   </table>
 <h2>Rekvizīti</h2>
   <table>
     [...]
   </table>

<?php } ?>

   </div>

 

Apakšējā blokā ieliekam, lai rāda no kaut kāda gada līdz esošajam gadam un "Copyright".

 

    <div id="bottom">

     <p>2002 - <?php echo date('Y', time() + 60*60*2); ?> SIA "Mauris egestas"<br />
       Copyright © All right reserved!</p>

   </div>

 

Vēl būtu jāizveido divi faili: robots.txt un sitemap.xml. Sīkāk par viņiem nerakstīšu, bet kā tādiem viņiem būtu jābūt, kaut arī šī ir ļoti, ļoti maza vietne un ieguvums no viņiem konkrēti šinī gadījuma tik pat kā nav.

 

Pilns faila kods: paste.php.lv.

 

 

Gribējās uzzināt vai kādam kas šāds būtu noderīgs un vai man turpināt ko šādu rakstīt. Kā arī gaidu jūsu ieteikumus, par ko rakstīt (iztiksim bez ar spēļu/trakeru saistītām lietām) un ko uzlabot rakstīšanas stilā. Pamatā doma ir nevis rakstīt visādus "niknos" rakstus kā tādus (nav tādu iemaņu), bet vairāk iet uz koda fragmenti + norādes/skaidrojumi.

Link to comment
Share on other sites

Izveido rakstu par robots.txt un sitemap.xml. Sen esmu vēlējies uzzināt vairāk par SEO, bet kaut kā nav sanācis laiks un vēlēšanās.

 

Par rakstu: tā jau viss ir forši, tikai, ja godīgi, nedomāju ka iesācēji šo lasīs. Varbūt tikai kāds retais.

Link to comment
Share on other sites

1)Manuprāt šādi veidot lapas ir slikta prakse, dodu priekšroku veidot MVC patternā un sākt to darīt jau no pašiem pamatiem, jo būtībā izveidot elementāru MVC patternā veidotu kodolu var kādās 20-30 rindiņās.

2)Mācību nolūkā jau protams var veidot šādas lapas, bet šeit, manuprāt, labāk der daudzi gatavi produkti, kurus varētu uzstādīt dažu mīnūšu vai desmitu minūšu laikā. Kaut vai tas pats wordpress.

3)Noderīgi daudziem noteikti būtu apskatīt "labākās prakses" web kodēšanas lietas, lai jau no paša sākuma cilvēki sāk iet +- pa pareizo ceļu.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...