# EXO4:CodeIgniter integration de Clean Blog theme

## Table des matieres

[TOC]

## Objectifs Pedagogiques
> *
> * Débuter avec les langages web de base
> * Debuter avec les Frameworks de base
> * Pouvoir créer des sites web modernes et rapides et des Landing pages marketing avec les languages et frameworks decouvert

## Le Guide du debutant

1. Ajouter php au path environnement du system.

**Windows 10 et Windows 8**

- Dans Rechercher, lancez une recherche et sélectionnez : Variables système recherchez la variable d'environnement PATH et sélectionnez-la.
- Si la variable d'environnement PATH n'existe pas, cliquez sur Nouvelle.
- Dans la fenêtre Ajouter la Nouvelle variable système
- indiquez la valeur de la variable d'environnement PATH.
- Cliquez sur OK.
- Fermez toutes les fenêtres restantes en cliquant sur OK.
- et relancer le Sevrer XAMPP
2. Telecharger et installer composer

[**Téléchargez et éxécutez Composer-Setup.exe (Windows Installer)**](https://getcomposer.org/Composer-Setup.exe) depuis la page de téléchargement de Composer. L’installateur va télécharger Composer, l’installer et modifier la variable d’environnement PATH. Vous pourez donc appeler Composer depuis n’importe quel répertoire.

## Initialiser le projet CodeIgniter

ici on va créer un dossier qui va contenir les sources du projet en lançant la commande suivante

- [ ] ouvrir la boite a commande en appuyant simultanément sur les touches `Windows+R`
- [ ] taper '`cmd`' et valider pour ouvrir l’émulateur de console de Windows
- [ ] se positionner dans le dossier dans le quel on veut stocker son projet cd `path/to/loaction/project`
- [ ] et enfin lancer la commande

composer create-project codeigniter4/appstarter project-root

- [ ] se positionner dans le dossier du projet en tapant `cd nom_du_dossier`
- [ ] ouvrir le projet dans sublime text en tapant `subl .`
- [ ] lancer le serveur interne de CodeIgniter en tapant `php spark serve`

### configurer les variables d'environnement

ici on va fixer les variables environnements du projets

- [ ] créer un fichier `.env`
- [ ] et y ajouter le code suivant

CI_ENVIRONMENT = development

# app.baseURL = ''
# app.forceGlobalSecureRequests = false

database.default.hostname = localhost
database.default.database = ci4
database.default.username = root
database.default.password = root
database.default.DBDriver = MySQLi

## presentation de la structure du projets

Dossiers dans votre projet après la mise en place :

.
├── app/
│ ├── Common.php
│ ├── Config/
│ ├── Controllers/
│ ├── Database/
│ ├── Filters/
│ ├── Helpers/
│ ├── Language/
│ ├── Libraries/
│ ├── Models/
│ ├── ThirdParty/
│ └── Views	/
├── public/
├── spark
├── tests/
├── vendor/
└── writable/
    ├── cache/
    ├── debugbar/
    ├── logs/
    ├── session/
    └── uploads/

- `app` le dossier app est le dossier avec lequel on va le plus interagir parceque c'est la bas qu'est stocker le code que nous allons ecrire pour developper notre application ,
- `public` ce dossier va contenir les fichiers qui vont etres servie dans le navigateur du client. cela inclus les images, les fichiers, css, js etc.
- `writable` le dossier writable contient les fichiers qui seront traiter par l'application
- `vendor/codeigniter4/framework/system` ce dossier est le repertoire ou le code du framework est stocker sans ce dossier nous ne pourront pas profiter des fonctionalite de codeIgniter

## Intégration du Thèmes

l'objectif de cette session est d'introduire l'apprenant au concept de
View et Controller et de routes.

ajouts des fichiers css, js, img du themes au dossier public

1. Copie des assets.
copies des dossiers `assets` , `css`, `js`,`tinymce`, dans le dossier `project/public/`

2. creer le controller `Themes`
pour creer un controller on peut utiliser la command

php spark make:controller [ControllerName]

php spark make:controller Theme

cette commande va creer un fichier nommee `[ControllerName].php` qui sera stocker dans le dossier `app/controller/`

le controller Theme va etre utiliser pour acceder au fichier que nous allons creer pendant l'integration du theme

dans le controller nous allons creer des methods qui vont presenter les view dans le navigateur

namespace App\Controllers;

class Theme extends BaseController
{
    public function index()
    {
        return view('Template/layout');
    }

}

3. Creation du premier view

on va ouvrir la page `home.html` du theme dans un navigateur en mode _view source_

4. Decomposition du theme en petite partie independent

on va creer dans le dossier `Views/` le dossier `Template/` et le dossier `News/`
- Views/Template/head.php
mettre cette partie dans le code

<!-- head.php -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Clean Blog - Start Bootstrap Theme</title>
        <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />

        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="<?=base_url('css/styles.css')?>" rel="stylesheet" />
    </head>

- Views/Template/navbar.php

<!-- navbar.php -->
    <!-- Navigation-->
    <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
        <div class="container px-4 px-lg-5">
            <a class="navbar-brand" href="index.html">Start Bootstrap</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                Menu
                <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ms-auto py-4 py-lg-0">
                    <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="/news">Home</a></li>
                    <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="/news/add">Add Post</a></li>
                </ul>
            </div>
        </div>
    </nav>

- Views/Template/header.php

<!-- header.php -->
<header class="masthead" style="background-image: url('<?=base_url('assets/img/about-bg.jpg')?>')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="page-heading">
    <?= $this->renderSection('title') ?>
</div>
</div>
</div>
</div>
</header>

- Views/Template/footer.php

<!-- footer.php -->
<!-- Footer-->
<footer class="border-top">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
    <ul class="list-inline text-center">
        <li class="list-inline-item">
            <a href="#!">
                <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                </span>
            </a>
        </li>
        <li class="list-inline-item">
            <a href="#!">
                <span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
                </span>
            </a>
        </li>
        <li class="list-inline-item">
            <a href="#!">
                <span class="fa-stack fa-lg">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                </span>
            </a>
        </li>
    </ul>
    <div class="small text-center text-muted fst-italic">Copyright &copy; Your Website 2021</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>

- Views/Template/layout.php

<body>
<!-- load navbar.php -->
<?= $this->include('Template/navbar') ?>

<?= $this->include('Template/header') ?>
<?= $this->section('title') ?>
    <?= $title ?? 'Clean Blog' ?>
<?= $this->endSection('title') ?>

<!-- Main Content-->
<main class="mb-4">
    <div class="row gx-4 gx-lg-5 justify-content-center">
        <div class="col-md-10 col-lg-8 col-xl-7">
    <?= $this->renderSection('main_content') ?>
        </div>
    </div>
</main>

<!-- load footer.php -->
<?= $this->include('Template/footer') ?>

expliquer les instructions `include`

- Views/News/blank.php

// blank.php
<?= $this->extend('Template/layout') ?>

<?= $this->section('title') ?>
    <h1>Hello World!</h1>
<?= $this->endSection('title') ?>

<?= $this->section('main_content') ?>


<?= $this->endSection('main_content') ?>

Expliquer les instructions `extend`, `section`,`endSection`

apres la creations des fichiers `Views/Template/head.php`, `Views/Template/navbar.php`, `Views/Template/footer.php`, `Views/Template/header.php`,`Views/Template/layout.php`, `Views/News/blank.php`,

// Theme.php
// blank
public function blank()
{
    return view('News/blank');
}

// blog post listing
public function blog(){
    return view('News/blog');
}

// view post
public function view($slug='')
{
    return view('News/single');
}

// add post
public function add()
{
    return view('News/form');
}

## Développement du blog

1. Creation de la base de donne et injection de donne

2. Mis a jour de la configuration base de donne dans le fichier `.env`

3. Creation du Models et creations d'une method custom

4. Implementation des fonctionalites