basic html

untuk frontend menggunakan fundamental dasar pengetahuan html css dan javascript saja, tidak menggunakan template engine

Introductions

secara default saya membuat structur saya sendiri atau gaya templating folder saya sendiri senyaman yang saya pakai, setelah lama berganti ganti style native front-end folder structure. akhirnya saya menemukannya dan menerapkannya pada project ini.

writing structure view

contoh structur yang saya terapkan

views
- frontend
  - layout
    header_view.php
    navbar_view.php
    footer_view.php
  - pages
    folderpage
    FileView.php
- auth
  - layout
    header_view.php
    footer_view.php
  - pages
    signin_view.php
    signup_view.php
- backend
  - layout
  - pages

Extending layout

view tetaplah view dan dibangun dengan format php, untuk melakukan extending layout bisa menggunakan build in function view("namaview") seperti contoh berikut ini .

example file home_view.php

<?= view('auth/layout/header_view') ?>
  <div id="app">
  
    ```
    
    content
    
    
    ```
  </div>
<?= view('auth/layout/footer_view') ?>

example header_view.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
  <title>Login &mdash; Stisla</title>

  <!-- General CSS Files -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

</head>

<body>

example footer_view.php

  <!-- General JS Scripts -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

  <!-- JS Libraies -->

</body>
</html>

passing data ke header or footer atau view lainnya ;

example berkas view nya home.php

<?= view('auth/layout/header_view',[
  "title" => $title,
  "meta" => $deskripsi,
]) ?>
  <div id="app">
  
    ```
    
    content
    
    
    ```
  </div>
<?= view('auth/layout/footer_view') ?>

example berkas headernya header.php

panggil data assoc dari keynya pada berkas

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
  <meta name="description" content="<?= $deskripsi ?>">
  <title><?= $title ?></title>

  <!-- General CSS Files -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

</head>

<body>

Previousfrontend Nextlibraries

Last updated 3 years ago

hashtagIntroductions

hashtagwriting structure view

hashtagExtending layout

hashtagpassing data ke header or footer atau view lainnya ;

Introductions

writing structure view

Extending layout

passing data ke header or footer atau view lainnya ;