bagaimana membuat website community profile dengan codeigniter (part2)

Membuat Website Community Profile Dengan Codeigniter (Part 2)

WONGMANTAP.com – Melanjutkan pembahasan sebelumnya membuat website community profile CI, Setelah sebelumnya wong mantap membahas bagaimana instalasi codeigniter dan juga konsep dari MVC, pada kesempatan kali ini wong mantap akan membahas bagaimana membuat website community profile dengan codeigniter menjadi lebih menarik dan juga dinamis.

Untuk mempersingkat waktu, yuk langsung ke TKP:

1. Download Template yang ada di link DISINI

2. Silahkan extract file .zip yang tadi didownload

3. Kemudian buat folder asset didalam folder webcomupro yang sudah kita buat sebelumnya.

folderassetwebcomupro

4. Setelah itu kembali ke folder thecharity yang sudah kita extract di poin no.2 tadi dan salin / copy seluruh folder / file yang berkaitan dengan style seperti css, images, js,font, style.css ke folder webcomupro/assets

folderthecharitywongmantap

folderassets2wongmantap

5. Kemudian setelah disalin / dicopy, tahap selanjutnya adalah kita mulai untuk membuat view / tampilannya

6. Silahkan buka folder application/views kemudian buat folder home dan buat file main.php didalamnya untuk menampilkan halaman awal website.

viewshome

7. Dan tuliskan code berikut pada main.php

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Komunitas Ngemil</title>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->

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

    <!-- FontAwesome CSS -->

    <link rel="stylesheet" href="<?=base_url();?>assets/css/font-awesome.min.css">

    <!-- ElegantFonts CSS -->

    <link rel="stylesheet" href="<?=base_url();?>assets/css/elegant-fonts.css">

    <!-- themify-icons CSS -->

    <link rel="stylesheet" href="<?=base_url();?>assets/css/themify-icons.css">

    <!-- Swiper CSS -->

    <link rel="stylesheet" href="<?=base_url();?>assets/css/swiper.min.css">

    <!-- Styles -->

    <link rel="stylesheet" href="<?=base_url();?>assets/style.css">

    <link rel="icon" href="<?=base_url();?>assets/images/logongemil.jpg" type="image/ico" />

</head>

<body>

    <header class="site-header">

        <div class="nav-bar">

            <div class="container">

                <div class="row">

                    <div class="col-12 d-flex flex-wrap justify-content-between align-items-center">

                        <div class="site-branding d-flex align-items-center">

                           <a class="d-block" href="index.html" rel="home"><img class="d-block" src="<?=base_url();?>assets/images/logo1.png" alt="logo"></a>

                        </div><!-- .site-branding -->

                        <nav class="site-navigation d-flex justify-content-end align-items-center">

                            <ul class="d-flex flex-column flex-lg-row justify-content-lg-end align-content-center">

                                <li class="current-menu-item"><a href="index.html">Home</a></li>

                                <li><a href="about.html">About us</a></li>

                                <li><a href="portfolio.html">Gallery</a></li>

                                <li><a href="news.html">News</a></li>

                                <li><a href="contact.html">Contact</a></li>

                            </ul>

                        </nav><!-- .site-navigation -->

                        <div class="hamburger-menu d-lg-none">

                            <span></span>

                            <span></span>

                            <span></span>

                            <span></span>

                        </div><!-- .hamburger-menu -->

                    </div><!-- .col -->

                </div><!-- .row -->

            </div><!-- .container -->

        </div><!-- .nav-bar -->

    </header><!-- .site-header -->

    <div class="swiper-container hero-slider">

        <div class="swiper-wrapper">

            <div class="swiper-slide hero-content-wrap">

                <img src="<?=base_url();?>assets/images/hero.jpg" alt="">

                <div class="hero-content-overlay position-absolute w-100 h-100">

                    <div class="container h-100">

                        <div class="row h-100">

                            <div class="col-12 col-lg-8 d-flex flex-column justify-content-center align-items-start">

                                <header class="entry-header">

                                    <h1>Donate</h1>

                                    <h4>4 a better world</h4>

                                </header><!-- .entry-header -->

                                <div class="entry-content mt-4">

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus vestibulum mauris quis aliquam. Integer accumsan sodales odio, id tempus ullamcorper</p>

                                </div><!-- .entry-content -->

                                <footer class="entry-footer d-flex flex-wrap align-items-center mt-5">

                                    <a href="#" class="btn gradient-bg mr-2">Donate Now</a>

                                    <a href="#" class="btn orange-border">Read More</a>

                                </footer><!-- .entry-footer -->

                            </div><!-- .col -->

                        </div><!-- .row -->

                    </div><!-- .container -->

                </div><!-- .hero-content-overlay -->

            </div><!-- .hero-content-wrap -->

            <div class="swiper-slide hero-content-wrap">

                <img src="<?=base_url();?>assets/images/hero.jpg" alt="">

                <div class="hero-content-overlay position-absolute w-100 h-100">

                    <div class="container h-100">

                        <div class="row h-100">

                            <div class="col-12 col-lg-8 d-flex flex-column justify-content-center align-items-start">

                                <header class="entry-header">

                                    <h1>Donate</h1>

                                    <h4>4 a better world</h4>

                                </header><!-- .entry-header -->

                                <div class="entry-content mt-4">

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus vestibulum mauris quis aliquam. Integer accumsan sodales odio, id tempus ullamcorper</p>

                                </div><!-- .entry-content -->

                                <footer class="entry-footer d-flex flex-wrap align-items-center mt-5">

                                    <a href="#" class="btn gradient-bg mr-2">Donate Now</a>

                                    <a href="#" class="btn orange-border">Read More</a>

                                </footer><!-- .entry-footer -->

                            </div><!-- .col -->

                        </div><!-- .row -->

                    </div><!-- .container -->

                </div><!-- .hero-content-overlay -->

            </div><!-- .hero-content-wrap -->

            <div class="swiper-slide hero-content-wrap">

                <img src="<?=base_url();?>assets/images/hero.jpg" alt="">

                <div class="hero-content-overlay position-absolute w-100 h-100">

                    <div class="container h-100">

                        <div class="row h-100">

                            <div class="col-12 col-lg-8 d-flex flex-column justify-content-center align-items-start">

                                <header class="entry-header">

                                    <h1>Donate</h1>

                                    <h4>4 a better world</h4>

                                </header><!-- .entry-header -->

                                <div class="entry-content mt-4">

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus vestibulum mauris quis aliquam. Integer accumsan sodales odio, id tempus ullamcorper</p>

                                </div><!-- .entry-content -->

                                <footer class="entry-footer d-flex flex-wrap align-items-center mt-5">

                                    <a href="#" class="btn gradient-bg mr-2">Donate Now</a>

                                    <a href="#" class="btn orange-border">Read More</a>

                                </footer><!-- .entry-footer -->

                            </div><!-- .col -->

                        </div><!-- .row -->

                    </div><!-- .container -->

                </div><!-- .hero-content-overlay -->

            </div><!-- .hero-content-wrap -->

        </div><!-- .swiper-wrapper -->

        <div class="pagination-wrap position-absolute w-100">

            <div class="container">

                <div class="swiper-pagination"></div>

            </div><!-- .container -->

        </div><!-- .pagination-wrap -->

        <!-- Add Arrows -->

        <div class="swiper-button-next flex justify-content-center align-items-center">

            <span><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z"/></svg></span>

        </div>

        <div class="swiper-button-prev flex justify-content-center align-items-center">

            <span><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1203 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z"/></svg></span>

        </div>

    </div><!-- .hero-slider -->

    <div class="home-page-icon-boxes">

        <div class="container">

            <div class="row">

                <div class="col-12 col-md-6 col-lg-4 mt-4 mt-lg-0">

                    <div class="icon-box active">

                        <figure class="d-flex justify-content-center">

                            <img src="<?=base_url();?>assets/images/hands-gray.png" alt="">

                            <img src="<?=base_url();?>assets/images/hands-white.png" alt="">

                        </figure>

                        <header class="entry-header">

                            <h3 class="entry-title">Become a Volunteer</h3>

                        </header>

                        <div class="entry-content">

                            <p>Berbagi cemilan untuk rekan-rekan yang lain. karena berbagi itu indah</p>

                        </div>

                    </div>

                </div>

                <div class="col-12 col-md-6 col-lg-4 mt-4 mt-lg-0">

                    <div class="icon-box">

                        <figure class="d-flex justify-content-center">

                            <img src="<?=base_url();?>assets/images/donation-gray.png" alt="">

                            <img src="<?=base_url();?>assets/images/donation-white.png" alt="">

                        </figure>

                        <header class="entry-header">

                            <h3 class="entry-title">Food & Snack</h3>

                        </header>

                        <div class="entry-content">

                            <p>Semua tentang makanan dan cemilan ada disini. </p>

                        </div>

                    </div>

                </div>

                <div class="col-12 col-md-6 col-lg-4 mt-4 mt-lg-0">

                    <div class="icon-box">

                        <figure class="d-flex justify-content-center">

                            <img src="<?=base_url();?>assets/images/charity-gray.png" alt="">

                            <img src="<?=base_url();?>assets/images/charity-white.png" alt="">

                        </figure>

                        <header class="entry-header">

                            <h3 class="entry-title">Online Meeting</h3>

                        </header>

                        <div class="entry-content">

                            <p>Selain kumpul-kumpul bareng di tempat-tempat keren. kita juga sering kumpul online  </p>

                        </div>

                    </div>

                </div>

            </div><!-- .row -->

        </div><!-- .container -->

    </div><!-- .home-page-icon-boxes -->

    <div class="home-page-welcome">

        <div class="container">

            <div class="row">

                <div class="col-12 col-lg-6 order-2 order-lg-1">

                    <div class="welcome-content">

                        <header class="entry-header">

                            <h2 class="entry-title">Welcome to our Community</h2>

                        </header><!-- .entry-header -->

                        <div class="entry-content mt-5">

                            <p>Selamat datang di komunitas ngemil indonesia. komunitas ini merupakan kumpulan para pencemil-pencemil diseluruh nusantara. </p>

                        </div><!-- .entry-content -->

                        <div class="entry-footer mt-5">

                            <a href="#" class="btn gradient-bg mr-2">Read More</a>

                        </div><!-- .entry-footer -->

                    </div><!-- .welcome-content -->

                </div><!-- .col -->

                <div class="col-12 col-lg-6 mt-4 order-1 order-lg-2">

                    <img src="<?=base_url();?>assets/images/welcome.jpg" alt="welcome">

                </div><!-- .col -->

            </div><!-- .row -->

        </div><!-- .container -->

    </div><!-- .home-page-icon-boxes -->

    <div class="home-page-events">

        <div class="container">

            <div class="row">

                <div class="col-12 col-lg-12">

                    <div class="upcoming-events">

                        <div class="section-heading">

                            <h2 class="entry-title">Upcoming Events</h2>

                        </div><!-- .section-heading -->

                        <div class="event-wrap d-flex flex-wrap justify-content-between">

                            <figure class="m-0">

                                <img src="<?=base_url();?>assets/images/event-1.jpg" alt="">

                            </figure>

                            <div class="event-content-wrap">

                                <header class="entry-header d-flex flex-wrap align-items-center">

                                    <h3 class="entry-title w-100 m-0"><a href="#">Ngemil Mantai</a></h3>

                                    <div class="posted-date">

                                        <a href="#">Aug 25, 2018 </a>

                                    </div><!-- .posted-date -->

                                    <div class="cats-links">

                                        <a href="#">Pantai Carita Anyer</a>

                                    </div><!-- .cats-links -->

                                </header><!-- .entry-header -->

                                <div class="entry-content">

                                    <p class="m-0">Makan-makan cemilan bareng sambil lihat suasana pantai. </p>

                                </div><!-- .entry-content -->

                                <div class="entry-footer">

                                    <a href="#">Read More</a>

                                </div><!-- .entry-footer -->

                            </div><!-- .event-content-wrap -->

                        </div><!-- .event-wrap -->

                        <div class="event-wrap d-flex flex-wrap justify-content-between">

                            <figure class="m-0">

                                <img src="<?=base_url();?>assets/images/event-2.jpg" alt="">

                            </figure>

                            <div class="event-content-wrap">

                                <header class="entry-header d-flex flex-wrap align-items-center">

                                    <h3 class="entry-title w-100 m-0"><a href="#">Ngemil dibawah jembatan 5</a></h3>

                                    <div class="posted-date">

                                        <a href="#">Aug 25, 2018 </a>

                                    </div><!-- .posted-date -->

                                    <div class="cats-links">

                                        <a href="#">Kolong Jembatan 5</a>

                                    </div><!-- .cats-links -->

                                </header><!-- .entry-header -->

                                <div class="entry-content">

                                    <p class="m-0">Ngemil sambil berbagi dengan rekan-rekan kolong. </p>

                                </div><!-- .entry-content -->

                                <div class="entry-footer">

                                    <a href="#">Read More</a>

                                </div><!-- .entry-footer -->

                            </div><!-- .event-content-wrap -->

                        </div><!-- .event-wrap -->

                        <div class="event-wrap d-flex flex-wrap justify-content-between">

                            <figure class="m-0">

                                <img src="<?=base_url();?>assets/images/event-3.jpg" alt="">

                            </figure>

                            <div class="event-content-wrap">

                                <header class="entry-header d-flex flex-wrap align-items-center">

                                    <h3 class="entry-title w-100 m-0"><a href="#">Ngemil sambil mendaki</a></h3>

                                    <div class="posted-date">

                                        <a href="#">Aug 25, 2018 </a>

                                    </div><!-- .posted-date -->

                                    <div class="cats-links">

                                        <a href="#">Gunung Himalaya</a>

                                    </div><!-- .cats-links -->

                                </header><!-- .entry-header -->

                                <div class="entry-content">

                                    <p class="m-0">Ngemil bareng sambil mendaki gunung himalaya</p>

                                </div><!-- .entry-content -->

                                <div class="entry-footer">

                                    <a href="#">Read More</a>

                                </div><!-- .entry-footer -->

                            </div><!-- .event-content-wrap -->

                        </div><!-- .event-wrap -->

                    </div><!-- .upcoming-events -->

                </div><!-- .col -->

                </div><!-- .row -->

        </div><!-- .container -->

    </div><!-- .home-page-events -->

    <div class="home-page-limestone">

        <div class="container">

            <div class="row align-items-end">

                <div class="coL-12 col-lg-6">

                    <div class="section-heading">

                        <h2 class="entry-title">We love eat,food,and snack. And also we help other people for eat food and snack.</h2>

                    </div><!-- .section-heading -->

                </div><!-- .col -->

                <div class="col-12 col-lg-6">

                    <div class="milestones d-flex flex-wrap justify-content-between">

                        <div class="col-12 col-sm-4 mt-5 mt-lg-0">

                            <div class="counter-box">

                                <div class="d-flex justify-content-center align-items-center">

                                    <img src="<?=base_url();?>assets/images/teamwork.png" alt="">

                                </div>

                                <div class="d-flex justify-content-center align-items-baseline">

                                    <div class="start-counter" data-to="120" data-speed="2000"></div>

                                    <div class="counter-k">K</div>

                                </div>

                                <h3 class="entry-title">Member</h3><!-- entry-title -->

                            </div><!-- counter-box -->

                        </div><!-- .col -->

                        <div class="col-12 col-sm-4 mt-5 mt-lg-0">

                            <div class="counter-box">

                                <div class="d-flex justify-content-center align-items-center">

                                    <img src="<?=base_url();?>assets/images/logongemil.png" alt="">

                                </div>

                                <div class="d-flex justify-content-center align-items-baseline">

                                    <div class="start-counter" data-to="79" data-speed="2000"></div>

                                </div>

                                <h3 class="entry-title">Food type</h3><!-- entry-title -->

                            </div><!-- counter-box -->

                        </div><!-- .col -->

                        <div class="col-12 col-sm-4 mt-5 mt-lg-0">

                            <div class="counter-box">

                                <div class="d-flex justify-content-center align-items-center">

                                    <img src="<?=base_url();?>assets/images/dove.png" alt="">

                                </div>

                                <div class="d-flex justify-content-center align-items-baseline">

                                    <div class="start-counter" data-to="253" data-speed="2000"></div>

                                </div>

                                <h3 class="entry-title">Volunteeres</h3><!-- entry-title -->

                            </div><!-- counter-box -->

                        </div><!-- .col -->

                    </div><!-- .milestones -->

                </div><!-- .col -->

            </div><!-- .row -->

        </div><!-- .container -->

    </div><!-- .our-causes -->

    <footer class="site-footer">

        <div class="footer-widgets">

            <div class="container">

                <div class="row">

                    <div class="col-12 col-md-6 col-lg-3">

                        <div class="foot-about">

                            <h2><a class="foot-logo" href="#"><img src="<?=base_url();?>assets/images/logo1.png" alt=""></a></h2>

                            <p>Komunitas ngemil merupakan kumpulan para pencemil pencemil di seluruh nusantara</p>

                            <ul class="d-flex flex-wrap align-items-center">

                                <li><a href="#"><i class="fa fa-pinterest-p"></i></a></li>

                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>

                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>

                                <li><a href="#"><i class="fa fa-dribbble"></i></a></li>

                                <li><a href="#"><i class="fa fa-behance"></i></a></li>

                                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>

                            </ul>

                        </div><!-- .foot-about -->

                    </div><!-- .col -->

                    <div class="col-12 col-md-6 col-lg-3 mt-5 mt-md-0">

                        <h2>Useful Links</h2>

                        <ul>

                            <li><a href="#">Privacy Polticy</a></li>

                            <li><a href="#">Become  a Volunteer</a></li>

                            <li><a href="#">Activities</a></li>

                            <li><a href="#">News</a></li>

                        </ul>

                    </div><!-- .col -->

                    <div class="col-12 col-md-6 col-lg-3 mt-5 mt-md-0">

                        <div class="foot-contact">

                            <h2>Contact</h2>

                            <ul>

                                <li><i class="fa fa-phone"></i><span>+6281987009881</span></li>

                                <li><i class="fa fa-envelope"></i><span>admin@ngemil.com</span></li>

                                <li><i class="fa fa-map-marker"></i><span>Jakarta Selatan</span></li>

                            </ul>

                        </div><!-- .foot-contact -->

                        <div class="subscribe-form">

                            <form class="d-flex flex-wrap align-items-center">

                                <input type="email" placeholder="Your email">

                                <input type="submit" value="send">

                            </form><!-- .flex -->

                        </div><!-- .search-widget -->

                    </div><!-- .col -->

                </div><!-- .row -->

            </div><!-- .container -->

        </div><!-- .footer-widgets -->

        <div class="footer-bar">

            <div class="container">

                <div class="row">

                    <div class="col-12">

                        <p class="m-0"><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->

Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>

<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>

                    </div><!-- .col-12 -->

                </div><!-- .row -->

            </div><!-- .container -->

        </div><!-- .footer-bar -->

    </footer><!-- .site-footer -->

    <script type='text/javascript' src='<?=base_url();?>assets/js/jquery.js'></script>

    <script type='text/javascript' src='<?=base_url();?>assets/js/jquery.collapsible.min.js'></script>

    <script type='text/javascript' src='<?=base_url();?>assets/js/swiper.min.js'></script>

    <script type='text/javascript' src='<?=base_url();?>assets/js/jquery.countdown.min.js'></script>

    <script type='text/javascript' src='<?=base_url();?>assets/js/circle-progress.min.js'></script>

    <script type='text/javascript' src='<?=base_url();?>assets/js/jquery.countTo.min.js'></script>

    <script type='text/javascript' src='<?=base_url();?>assets/js/jquery.barfiller.js'></script>

    <script type='text/javascript' src='<?=base_url();?>assets/js/custom.js'></script>

</body>

</html>

8. Selanjutnya kita akan membuat controller. buka folder application/controller kemudian silahkan buat file dengan nama

Home.php

kemudian tambahkan code berikut:

public function index()

{
  $this->load->view('home/main');
}
9. Setelah selesai buat controller rekan-rekan bisa langsung mencobanya di browser dengan cara mengettikan http://localhost/webcomupro
errorbaseurl

Hahh ?? Koq Error ??

Tenang aja ! rekan mantap ga usah panik !

Error tersebut disebabkan base_url yang ada di main.php belum di define atau dikenalkan.

Cara mengatasi error tersebut adalah dengan mengubah file application/config/config.php.

Ubah

$config['base_url'] = '';
menjadi
$config['base_url'] = "http://".$_SERVER['HTTP_HOST'];
$config['base_url'] .= preg_replace('@/+$@','',dirname($_SERVER['SCRIPT_NAME'])).'/';
dan cari code di application/config/autoload.php:
$autoload['helper'] = array();
silahkan tambahkan helper url  seperti dibawah ini:
$autoload['helper'] = array('url');
Jika semua tahapan sudah selesai rekan mantap bisa langsung merefresh halaman browser yang tadi sudah diketikkan http://localhost/webcomupro
hasilwebcomupro
Taraaa, akhirnya website community profile kita sudah jadi. rekan mantap bisa mengembangkan websitenya untuk komunitas rekan mantap.
Nah jika websitenya rekan mantap sudah berhasil dibuat rekan mantap bisa mempublish webnya ya dengan cara membeli domain dan hosting
Untuk full sourcecode bisa langsung download DISINI ya
Semangat dan Happy Coding 🙂
Posted in General, Programming and tagged , , , , , , , .

Leave a Reply

Your email address will not be published. Required fields are marked *