Refactoring (a kód újra rendszerezése), templating (sablonok használata) és menü

A legutóbbi fejezetben megírtuk a Hello, Világ! oldalunkat. Most ezt egy kicsit újra rendszerezzük. Bár kétségkívűl jól mutat, most mégis eltávolítjuk a controller-ből a _controller utótagot. 🙂

Ezt néhány file-átnevezéssel, illetve pár sornyi kódmódosítással megtehetjük. A hivatkozások miatt (referenciák) ezt a műveletet nyilván körültekintéssel kell elvégeznünk. Így az oldalunkat az alábbi címen is elérhetjük.

http://localhost/apartman/index.php/apartments/index

Ahol az apartments a controller neve, az index pedig a megfelelő metódus. Ez egy ún. beszédes url, a RESTful architektúrának (https://hu.wikipedia.org/wiki/REST) megfelel.

Miután ezzel megvagyunk, keressünk egy ingyenes sablont az interneten. Az alábbi némi keresés után pont megfelelő. Ez egy ingyenes jQuery és Bootstrap alapokra épülő HTML5-ös sablon. A jQuery java script könyvtárnak a https://jquery.com/ oldalon, a Bootstrap front-end toolkit-nek pedig a https://getbootstrap.com/ oldalon lehet utánanézni. Fontos szempont egy modern weblapnál, hogy jól olvasható legyen okostelefonon is. Ez a gyakorlatban azt jelenti, hogy bizonyos szélesség alatt hamburgermenü jelenik meg az oldalon, illetve a több hasábos megjelenés összecsúszik egyetlen hasábba.

https://freehtml5.co/architect-free-html5-bootstrap-template-for-architects-and-portfolio-websites/

A sablont kibontjuk, majd a benne található css, fonts, images és js könyvtárakat az application gyökér könyvtárral egy szinten újonnan létrehozott assets könyvtárba másoljuk.

A sablon beillesztését az alábbi weboldalon leírt módon végezzük.

https://www.phpflow.com/php/creating-template-codeigniter-3-using-bootstrap-theme/

Az index.php eltűntetésével (mod_rewrite apache modul) nagyvonalúan nem foglalkozunk. Extrémsportolók beállíthatják önszorgalomból. 🙂

A libraries könyvtárban létrehozzuk a Template.php állományt az alábbi tartalommal.

<?php
class Template {
                //ci instance
                private $CI;
                //template Data
                var $template_data = array();
 
                public function __construct() 
                {
                                $this->CI =& get_instance();
                }
 
                function set($content_area, $value)
                {
                                $this->template_data[$content_area] = $value;
                }
 
                function load($template = '', $name ='', $view = '' , $view_data = array(), $return = FALSE)
                {
                                $this->set($name , $this->CI->load->view($view, $view_data, TRUE));
                               
                                $this->CI->load->view('layouts/'.$template, $this->template_data);
                }
                               
}
?>

Látható, hogy ez egy igen egyszerű implementáció, egy set és egy load függvénnyel. Többre azonban nincs szükségünk. 🙂

A views könyvtár alatt (az appplication gyökérben) hozzunk létre egy layouts könyvtárat. Ebbe fog kerülni a sablonunk, a default_layout.php file.

<?php
        $my_base_url = '/apartman/';
?>
<!DOCTYPE HTML>
<html>
        <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Apartman - <?php echo $title;?></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Apartman booking website" />
        <meta name="keywords" content="apartman, booking, website" />
        <meta name="author" content="Gergely Vámosi" />

        <!-- 
        //////////////////////////////////////////////////////

        FREE HTML5 TEMPLATE 
        DESIGNED & DEVELOPED by FreeHTML5.co
                
        Website:                http://freehtml5.co/
        Email:                  info@freehtml5.co
        Twitter:                http://twitter.com/fh5co
        Facebook:               https://www.facebook.com/fh5co

        //////////////////////////////////////////////////////
         -->

        <!-- Facebook and Twitter integration -->
        <meta property="og:title" content=""/>
        <meta property="og:image" content=""/>
        <meta property="og:url" content=""/>
        <meta property="og:site_name" content=""/>
        <meta property="og:description" content=""/>
        <meta name="twitter:title" content="" />
        <meta name="twitter:image" content="" />
        <meta name="twitter:url" content="" />
        <meta name="twitter:card" content="" />

        <link href="https://fonts.googleapis.com/css?family=Open+Sans|Playfair+Display" rel="stylesheet">
        
        <!-- Animate.css -->
        <link rel="stylesheet" href="<?php echo $my_base_url?>assets/css/animate.css">
        <!-- Icomoon Icon Fonts-->
        <link rel="stylesheet" href="<?php echo $my_base_url?>assets/css/icomoon.css">
        <!-- Bootstrap  -->
        <link rel="stylesheet" href="<?php echo $my_base_url?>assets/css/bootstrap.css">

        <!-- Flexslider  -->
        <link rel="stylesheet" href="<?php echo $my_base_url?>assets/css/flexslider.css">

        <!-- Theme style  -->
        <link rel="stylesheet" href="<?php echo $my_base_url?>assets/css/style.css">

        <!-- Modernizr JS -->
<script src="<?php echo $my_base_url?>assets/js/modernizr-2.6.2.min.js"></script>
        <!-- FOR IE9 below -->
        <!--[if lt IE 9]>
<script src="<?php echo $my_base_url?>assets/js/respond.min.js"></script>
        <![endif]-->

        </head>
        <body>
                
        <div class="fh5co-loader"></div>
        
        <div id="page">
        <nav class="fh5co-nav" role="navigation">
                <div class="container">
                        <div class="top-menu">
                                <div class="row">
                                        <div class="col-sm-2">
                                                <div id="fh5co-logo"><a href="index.html">Apartman<span>.</span></a></div>
                                        </div>
                                        <div class="col-sm-10 text-right menu-1">
                                                <ul>
                                                        <li class="active"><a href="index.html">Képek</a></li>
                                                        <li><a href="single.html">Foglalás</a></li>
                                                        <li><a href="contact.html">Kapcsolat</a></li>
                                                </ul>
                                        </div>
                                </div>
                                
                        </div>
                </div>
        </nav>
        <div class="container">
                <div id="fh5co-intro">
                        <div class="row animate-box">
                                <div class="col-md-8 col-md-offset-2 col-md-pull-2">
                                        <h2>Apartman kiadó.</span></h2>
                <!-- PAGE CONTENT BEGINS -->
                        <?php echo $contents;?>
                <!-- PAGE CONTENT ENDS -->
                                </div>
                        </div>
                </div>
        </div><!-- END container -->

        <div class="container">
                <footer id="fh5co-footer" role="contentinfo">
                        <div class="row">
                                <div class="col-md-3 fh5co-widget">
                                        <h4>Az oldalról</h4>
                                        <p>Jogi információ.</p>
                                </div>
                                <div class="col-md-3 col-md-push-1">
                                        <h4>Lorem Ipsum</h4>
                                        <ul class="fh5co-footer-links">
                                                <li><a href="#">12345</a></li>
                                                <li><a href="#">67890</a></li>
                                        </ul>
                                </div>

                                <div class="col-md-3 col-md-push-1">
                                        <h4>Linkek</h4>
                                        <ul class="fh5co-footer-links">
                                                <li><a href="#">Home</a></li>
                                                <li><a href="#">Képek</a></li>
                                                <li><a href="#">Foglalás</a></li>
                                                <li><a href="#">Kapcsolat</a></li>
                                        </ul>
                                </div>

                                <div class="col-md-3">
                                        <h4>Kapcsolat</h4>
                                        <ul class="fh5co-footer-links">
                                                <li>Kossuth utca 10,<br>1111 Budapest</li>
                                                <li><a href="tel://1234567920">+ 1235 2355 98</a></li>
                                                <li><a href="mailto:info@yoursite.com">info@yoursite.com</a></li>
                                                <li><a href="http://localhost/apartman">apartman</a></li>
                                        </ul>
                                </div>

                        </div>

                        <div class="row copyright">
                                <div class="col-md-12 text-center">
                                        <p>
                                                <small class="block">&copy; 2016 Free HTML5. All Rights Reserved.</small>
                                                <small class="block">Designed by <a href="http://freehtml5.co/" target="_blank">FreeHTML5.co</a> Demo Images: <a href="http://unsplash.co/" target="_blank">Unsplash</a></small>
                                        </p>
                                        <p>
                                                <ul class="fh5co-social-icons">
                                                        <li><a href="#"><i class="icon-twitter"></i></a></li>
                                                        <li><a href="#"><i class="icon-facebook"></i></a></li>
                                                        <li><a href="#"><i class="icon-linkedin"></i></a></li>
                                                        <li><a href="#"><i class="icon-dribbble"></i></a></li>
                                                </ul>
                                        </p>
                                </div>
                        </div>
                </footer>
        </div><!-- END container -->
        </div>

        <div class="gototop js-top">
                <a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
        </div>
        
        <!-- jQuery -->
<script src="<?php echo $my_base_url?>assets/js/jquery.min.js"></script>
        <!-- jQuery Easing -->
<script src="<?php echo $my_base_url?>assets/js/jquery.easing.1.3.js"></script>
        <!-- Bootstrap -->
<script src="<?php echo $my_base_url?>assets/js/bootstrap.min.js"></script>
        <!-- Waypoints -->
<script src="<?php echo $my_base_url?>assets/js/jquery.waypoints.min.js"></script>
        <!-- Flexslider -->
<script src="<?php echo $my_base_url?>assets/js/jquery.flexslider-min.js"></script>
        <!-- Sticky Kit -->
<script src="<?php echo $my_base_url?>assets/js/sticky-kit.min.js"></script>
        <!-- Main -->
<script src="<?php echo $my_base_url?>assets/js/main.js"></script>

        </body>
</html>

A config/autoload.php file-ban az alábbi módosítástokat eszközöljük.

// templating added by me on 2020/07/23
$autoload['libraries'] = array('database','session','template');
// added by  me on 2020/07/23
$autoload['helper'] = array('url');

A controllers/Apartments.php controller-ünkbe pedig illesszük be a sablonkezelést.

//$this->load->view('apartments', $data);

$this->template->set('title', 'Home');
$this->template->load('default_layout', 'contents' , 'apartments', $data);

Tesztelhetjük az új oldalunkat! 🙂

http://localhost/apartman/index.php/apartments/index

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés /  Módosítás )

Google kép

Hozzászólhat a Google felhasználói fiók használatával. Kilépés /  Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés /  Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés /  Módosítás )

Kapcsolódás: %s