In acest articol voi prezenta cum sa faci un site static folosind framework-ul Codeigniter si Bootstrap 4. Daca vrei sa faci un site simplu sau mediu ca si continut si nu vrei sa folosesti o baza de date si panou de admin aceasta varianta este una fiabila. Am folosit pentru cativa clienti si sunt foarte multumit de rezultatul final.
Primul pas este sa intram pe site-ul oficial Codeigniter si sa descarcam cea mai recenta versiune (The latest is Version 3.1.7).
Se dezarhiveaza fisierul descarcat. Pentru realizarea acestui tutorial am folosit localhost xampp. Fisierele le-am mutat in folderul htdocs din xampp. Se sterge folderul user_guide nu avem nevoie de el in proiect. Acolo se afla documentatia.
Deschidere proiect in VisualStudioCode pentru a edita fisierele de care avem nevoie pentru proiect.
Urmatorul pas este sa intram pe pagina de decumentatie de pe site. Pentru asta vom intra in pagina de tutorial la capitolul pagini statice. Se creaza un fisier Pages.php in folderul controllers avand urmatorul continut.
class Pages extends CI_Controller {
public function view($page = 'home')
{
}
}
Urmatorul pas este sa facem un folder nou numit templates in folderul views iar in acest folder vom crea 2 fisiere header,php si footer.php. Header.php are urmatorul continut:
<html>
<head>
<title>CodeIgniter Tutorial</title>
</head>
<body>
<h1><?php echo $title; ?></h1>
footer.php are urmatorul continut
<em>© 2015</em>
</body>
</html>
Urmatorul pas am facut un folder pages in folderul views in care am creat doua fisiere home.php si about.php
Pentru a incarca noile fisiere trebuie sa adaugam cateva coduri in fisierul Pages.php creat mai devreme din folderul controllers.
class Pages extends CI_Controller {
public function view($page = 'home') {
if ( ! file_exists(APPPATH.'views/pages/'.$page.'.php'))
{
// Whoops, we don't have a page for that!
show_404();
}
$data['title'] = ucfirst($page); // Capitalize the first letter
$this->load->view('templates/header', $data);
$this->load->view('pages/'.$page, $data);
$this->load->view('templates/footer', $data);
}
}
Routing
Ca totul sa se incarce in browser corect trebuie sa editam urmatorul fisier routes.php din folderul config.
$route['default_controller'] = 'pages/view'; $route['(:any)'] = 'pages/view/$1';
Seo
Pentru partea de seo la site am gasit urmatoarea solutie. Am creat un fisier numit meta.php in folderul templates si acolo am urmatorul cod:
<?php
$url = 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
if (strpos($url, 'about') !== false) {
echo '
<title>Codeigniter site | About</title>
<meta charset="UTF-8">
<meta name="description" content="Descriere pagina, de completat">
<meta name="keywords" content="">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> ';
} else if (strpos($url, 'contact') !== false){
echo '
<title>Codeigniter site | Contact</title>
<meta charset="UTF-8">
<meta name="description" content="Descriere pagina, de completat">
<meta name="keywords" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,requiresActiveX=true"> ';
} else {
echo '
<title>Codeigniter site | Acasa</title>
<meta charset="utf-8">
<meta name="description" content="Descriere pagina, de completat">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,requiresActiveX=true">';
}
?>
Pentru a incarca noul fisier trebuie sa modificam fisierul header.php din folderul templates astfel:
<html>
<head>
<?php
require_once(APPPATH.'/views/templates/meta.php');
?>
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
</head>
<body>
Fisier .htaccess
Pentru ca site-ul nostru sa functioneze corect pe un serve live avem nevoie si de fisierul .htaccess care sa contina urmatorul cod:
<IfModule mod_rewrite.c>
RewriteBase /
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>
<IfModule !mod_rewrite.c>
ErrorDocument 404 /index.php
</IfModule>
Includere Bootstrap in site.
Optional se poate folosi si Bootstrap in site pentru a dezvolta intr-un mod bun viitorul proiect. Se modifica fisierul header.php astfel:
<html>
<head>
<?php
require_once(APPPATH.'/views/templates/meta.php');
?>
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
si fisierul footer.php:
<em>© 2015</em>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
</body>
</html>
Avantajele unui site cu pagini statice:
Paginile statice sunt formate din documente specifice fixe care sunt formate din text si limbaj de marcare. O cerere catre server genereaza pagina stocata in browser, care este de cele mai multe ori un document HTML si care este afisata in forma exacta in care a fost conceputa. Singurul rol al serverului este acela de a furniza pagina, fara sa ii aduca acesteia modificari.
- Fara o conectare la o baza de date automat site-ul va avea o viteza de incarcare superioara, exact ce dorecte si Google.
- Din punct de vedere Seo Codeigniter ofera linkuri seo curate compatibile cu cerintele Google.
- Se realizeaza destul de repede cu minime cunostinte de programare Html, css3 si Bootstrap.
Fisierele folosite in articol le puteti gasi aici: https://mega.nz/#!egl3VRrJ!h-85xBMXYTlvwIWIMLfwytRqTDGvhKXZnRdap-I1T9w