Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
31 views

Modul Bootstrap Dengan CodeIgniter

Uploaded by

rollyrifqi08
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
31 views

Modul Bootstrap Dengan CodeIgniter

Uploaded by

rollyrifqi08
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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