Scribd
Upload
21 views

Modul Bootstrap Dengan CodeIgniter

Uploaded by

rollyrifqi08
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views

Modul Bootstrap Dengan CodeIgniter

Uploaded by

rollyrifqi08
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

Modul Bootstrap dengan CodeIgniter

Persiapan
Download bootstrap di link ini
bit.ly/ci4juli

Langkah
1. Jalankan xampp nya

2. Jalankan vscode

3. Masukkan file CI4 yang sudah di download kedalam xampp/htdocs/


4. Extrak Kembali file CI4 yang sudah didownload sebelumnya dengan cara klik kanan
extract here

5. Ubah nama nya menjadi project_(nama masing-masing)


6. Extract Bootstrap yang sudah didownload tadi

7. Copykan folder CSS dan JS yang ada di Bootstrap tadi kedalam folder
xampp/htdocs/public

8. Buka vscode nya masuk kedalam folder CI yang sudah di buat tadi dengan cara klik
new->open folder
9. Rename env menjadi .env dan edit bagian dalam nya hilangkan tanda pagar pada #
CI_ENVIRONMENT = production serta ubah menjadi # CI_ENVIRONMENT =
development
10. Selanjutnya buka app/config/app.php edit pada bagian public string $baseURL =
'http://localhost:8080/'; menjadi nama url file kita public string $baseURL =
'http://localhost/nama_folder/public/';

11. Selanjutnya masih dalam folder config buka file Routes.php tambahkan coding di
bawah ini
$routes->get('/about', 'Page::about');
$routes->get('/contact', 'Page::contact');
$routes->get('/faqs', 'Page::faqs');
12. Setelah itu buka folder Controller tambahkan file Page.php

13. Masukkan coding dibawah ini


<?php

namespace App\Controllers;

class Page extends BaseController


{
public function about()
{
echo view("about");
}

public function contact()


{
echo view("contact");
}

public function faqs()


{
echo view("faqs");
}
}

14. Selanjutnya masuk folder view, edit coding pada welcome_message.php menjadi seperti
di bawah ini
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protal Berita Codeigniter</title>

<!-- Bootstrap CSS -->


<link rel="stylesheet" href="<?= base_url('css/bootstrap.min.css') ?>" />
</head>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">


<div class="container">
<a class="navbar-brand" href="<?= base_url() ?>">Home</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?= base_url('about') ?
>">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('contact') ?
>">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('faqs') ?
>">Faqs</a>
</li>
</ul>
</div>
</div>
</nav>

<header class="jumbotron jumbotron-fluid">


<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">Mading SMKN 1 Buntok</h1>
</div>
</div>
</div>
</header>

<div class="container">
<div class="row">
<div class="col-md-12 my-2 card">
<div class="card-body">
<h5 class="h5">Jumat Bersih</h5>
<p>Akan di adakan kerja bakti membersihkan lingkungan smk
pada tgl 19 Juli 2024 </p>
</div>
</div>
<div class="col-md-12 my-2 card">
<div class="card-body">
<h5 class="h5">Maling Helm</h5>
<p>hati-hati banyak maling helm</p>
</div>
</div>
</div>
</div>

<footer class="jumbotron jumbotron-fluid mt-5 mb-0">


<div class="container text-center">Copyright &copy <?= Date('Y') ?>
SMKN 1 Buntok</div>
</footer>

<!-- Jquery dan Bootsrap JS -->


<script src="<?= base_url('js/jquery.min.js') ?>"></script>
<script src="<?= base_url('js/bootstrap.min.js') ?>"></script>

</body>

</html>
15. Jika sudah selanjutnya tambahkan file about.php di folder View

16. Kemudian masukkan coding berikut di about.php


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About us</title>

<!-- Bootstrap CSS -->


<link rel="stylesheet" href="<?= base_url('css/bootstrap.min.css') ?>" />
</head>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">


<div class="container">
<a class="navbar-brand" href="<?= base_url() ?>">Home</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?= base_url('about') ?
>">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('contact') ?
>">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('faqs') ?
>">Faqs</a>
</li>
</ul>
</div>
</div>
</nav>

<header class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">About us</h1>
</div>
</div>
</div>
</header>

<div class="container">
<div class="row">
<div class="col-md-12">
<p>Ini tentang mading smkn 1 buntok</p>
<p>Dilarang menyebarkan berita HOAX pada mading ini</p>
</div>
</div>
</div>

<footer class="jumbotron jumbotron-fluid mt-5 mb-0">


<div class="container text-center">Copyright &copy <?= Date('Y') ?>
SMKN 1 Buntok</div>
</footer>

<!-- Jquery dan Bootsrap JS -->


<script src="<?= base_url('js/jquery.min.js') ?>"></script>
<script src="<?= base_url('js/bootstrap.min.js') ?>"></script>
</body>
</html>

17. Jika sudah selanjutnya tambahkan file contact.php di folder View dan masukkan coding
berikut
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact us</title>

<!-- Bootstrap CSS -->


<link rel="stylesheet" href="<?= base_url('css/bootstrap.min.css') ?>" />
</head>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">


<div class="container">
<a class="navbar-brand" href="<?= base_url() ?>">Home</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?= base_url('about') ?
>">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('contact') ?
>">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('faqs') ?
>">Faqs</a>
</li>
</ul>
</div>
</div>
</nav>

<header class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">Contact us</h1>
</div>
</div>
</div>
</header>

<div class="container">
<div class="row">
<div class="col-md-6">

<form action="" class="form">

<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control">
</div>

<div class="form-group">
<label for="email">Message</label>
<textarea name="message" class="form-control" id="" cols="30"
rows="10"></textarea>
</div>

<div class="form-group">
<input type="submit" value="Kirim" class="btn btn-primary w-
100">
</div>

</form>

</div>
</div>
</div>

<footer class="jumbotron jumbotron-fluid mt-5 mb-0">


<div class="container text-center">Copyright &copy <?= Date('Y') ?>
SMKN 1 Buntok</div>
</footer>

<!-- Jquery dan Bootsrap JS -->


<script src="<?= base_url('js/jquery.min.js') ?>"></script>
<script src="<?= base_url('js/bootstrap.min.js') ?>"></script>

</body>

</html>

18. Jika sudah selanjutnya tambahkan file faqs.php di folder View dan masukkan coding
berikut
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQs</title>

<!-- Bootstrap CSS -->


<link rel="stylesheet" href="<?= base_url('css/bootstrap.min.css') ?>" />
</head>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">


<div class="container">
<a class="navbar-brand" href="<?= base_url() ?>">Home</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?= base_url('about') ?
>">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('contact') ?
>">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('faqs') ?
>">Faqs</a>
</li>
</ul>
</div>
</div>
</nav>

<header class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">FAQs</h1>
</div>
</div>
</div>
</header>

<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="h2">Bagaimana cara menambah Mading?</h2>
<p>bisa hubungi admin di link ini 0823*******</p>
<h2 class="h2">Bagaimana Cara cepat kaya?</h2>
<p>Banyak Berdoa</p>
</div>
</div>
</div>

<footer class="jumbotron jumbotron-fluid mt-5 mb-0">


<div class="container text-center">Copyright &copy <?= Date('Y') ?>
SMKN 1 Buntok</div>
</footer>

<!-- Jquery dan Bootsrap JS -->


<script src="<?= base_url('js/jquery.min.js') ?>"></script>
<script src="<?= base_url('js/bootstrap.min.js') ?>"></script>
</body>

</html>

19. Selesai coba jalankan webnya maka hasilnya akan seperti ini.

You might also like