Skip to main content

EAS MPPL - Demo dan Dokumentasi EAS

 EAS MPPL 2021 Pada kesempatan ini kelompok kami akan menjelaskan salah satu produk perangkat lunak milik Zoho yaitu Zoho Marketing Automation yang dikerjakan secara berkelompok yang beranggotakan: Ricky Supriyanto 05111940000036 Arvel Gavrilla R 05111940000040 M Arif Faizin 05111940000060 Zulfiqar Fauzul Akbar 05111940000101 Raihan Alifianto 05111940000213 Dengan hasil sebagai berikut 1. Deskripsi Produk 2. Manajemen Ruang Lingkup 3. Manajemen Waktu 4. Manajemen Biaya 5. Manajemen Resiko 6. Video demo
Post a Comment

Tugas 9 PBKK - Laravel : Membuat Landing Page

Pada postingan kali ini, akan membahas membuat landing page menggunakan Laravel 8. Pada postingan ini saya akan mencoba membuat Landing Page dari Dicoding Indonesia (dicoding.com) dengan tampilan yang berbeda. Langsung saja ikuti langkah-langkah berikut:

  1. Pertama, buat sebuah view baru pada resources/views/ dengan nama homepage.blade.php lalu isi dengan kode berikut:
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Dicoding - Bangun Karirmu sebagai Developer Profesional</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Bootstrap 5 -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <!-- Icon -->
        <link rel="shortcut icon" href="{{ url('favicon.ico') }}" type="image/x-icon">
        <!-- Styles -->
        <link href="{{ url('css/style.css') }}" rel="stylesheet" />

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
    </head>
    <body class="antialiased"></body>
</html>

    Kode tersebut akan memanggil Bootstrap 5 sebagai framework utama dalam menyusun tampilan pada projek ini
  2. Kemudian tambahkan kode berikut pada body dari halaman homepage sebagai konten utama dalam homepage
      1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
            <!-- Navigation-->
        <nav id="navbar_top" class="navbar navbar-light fixed-top">
            <div class="container">
                <a class="navbar-brand" href="#"><img class="custom-logo" src="{{ url('img/logo_inverted_transparent.png') }}" alt="Logo Dicoding" width="204" height="71"></a>
                <div>
                    <a class="btn fs-6 text-white" href="#">Produk</a>
                    <a class="btn fs-6 text-white" href="#">Blog</a>
                    <a class="btn fs-6 text-white" href="#">Hubungi Kami</a>
                    <a class="btn fs-6 text-white" href="#">Tentang Kami</a>
                </div>
            </div>
        </nav>
        <main>
            <section class="w-full min-vh-100 bg-gradient-theme">
                <div class="d-flex vh-100 container justify-content-center align-items-center">
                    <div class="text-white">
                        <h1>Bangun Karirmu sebagai</h1>
                        <h2 class="p-3 bg-white" style="color: #2D3E50;">Programmer Handal!</h2>
                        <p class="fs-5">Jadilah tuan rumah di negeri sendiri dengan belajar langsung dari para inovator dan developer expert</p>
                    </div>
                    <div class="d-none d-sm-block">
                        <img class="h-auto mw-100" src="{{ url('img/home_icon.png') }}" alt="">
                    </div>
                </div>
                <div class="shape shape-bottom">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
                        <path class="shape-fill" d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7
                        c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4
                        c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"></path>
                    </svg>
                </div>
            </section>
            <section class="container p-3 mt-4">
                <div class="text-center">
                    <h2>4 Pilar yang Dapat Kamu Manfaatkan</h2>
                    <p>Berikut ini adalah 4 pilar yang kami siapkan untuk membantumu membangun karir sebagai developer profesional.</p>
                </div>
                <div class="my-4">
                    <div class="row text-center">
                        <div class="col col-12 col-md-6 my-2 col-lg-3">
                            <div class="mx-2 h-100 shadow-lg rounded-3 p-4">
                                <img src="{{ url('img/home-thumb-academy.png') }}" alt="">
                                <h3>Academy</h3>
                                <p>Belajar menggunakan kurikulum yang telah divalidasi industri IT internasional seperti Google, Microsoft, dan LINE. Diskusikan Code yang kamu tulis dengan para Expert.</p>
                            </div>
                        </div>
                        <div class="col col-12 col-md-6 my-2 col-lg-3">
                            <div class="mx-2 h-100 shadow-lg rounded-3 p-4">
                                <img src="{{ url('img/home-thumb-challenge.png') }}" alt="">
                                <h3>Challenge</h3>
                                <p>Uji kemampuanmu dengan mengikuti Challenge yang diselenggarakan oleh perusahaan IT nasional dan multi-nasional.</p>
                            </div>
                        </div>
                        <div class="col col-12 col-md-6 my-2 col-lg-3">
                            <div class="mx-2 h-100 shadow-lg rounded-3 p-4">
                                <img src="{{ url('img/home-thumb-event.png') }}" alt="">
                                <h3>Event</h3>
                                <p>Bangun jejaring luas. Temui langsung para pelaku IT untuk saling berbagi dan belajar. Cari Event terdekat dari kotamu.</p>
                            </div>
                        </div>
                        <div class="col col-12 col-md-6 my-2 col-lg-3">
                            <div class="mx-2 h-100 shadow-lg rounded-3 p-4">
                                <img src="{{ url('img/home-thumb-job.png') }}" alt="">
                                <h3>Job Platform</h3>
                                <p>Cari lowongan pekerjaan khusus developer. Untuk perusahaan, temukan talenta digital yang Anda butuhkan. Bersama membangun ekosistem IT Indonesia.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="w-full mt-3 bg-gradient-theme position-relative">
                <div class="shape shape-top">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
                        <path class="shape-fill" d="M0,6V0h1000v100L0,6z"></path>
                    </svg>
                </div>
                <div class="container p-3">
                    <div class="text-white text-center" style="margin-top: 6rem;">
                        <h2>Partner Kami</h2>
                        <p>Dicoding bekerjasama dengan perusahaan teknologi dunia untuk membangun ekosistem IT Indonesia.</p>
                    </div>
                    <div class="mt-4" style="margin-bottom: 6rem;">
                        <div class="row">
                            <div class="col col-12 col-md-6 col-lg-3 my-3">
                                <div class="mx-2 h-100 shadow-lg rounded-3 p-4 bg-white d-flex justify-content-center align-items-center">
                                    <img src="{{ url('img/alcatel_logo.png') }}" alt="">
                                </div>
                            </div>
                            <div class="col col-12 col-md-6 col-lg-3 my-3">
                                <div class="mx-2 h-100 shadow-lg rounded-3 p-4 bg-white d-flex justify-content-center align-items-center">
                                    <img src="{{ url('img/aws-educate_logo.png') }}" alt="">
                                </div>
                            </div>
                            <div class="col col-12 col-md-6 col-lg-3 my-3">
                                <div class="mx-2 h-100 shadow-lg rounded-3 p-4 bg-white d-flex justify-content-center align-items-center">
                                    <img src="{{ url('img/google_logo.png') }}" alt="">
                                </div>
                            </div>
                            <div class="col col-12 col-md-6 col-lg-3 my-3">
                                <div class="mx-2 h-100 shadow-lg rounded-3 p-4 bg-white d-flex justify-content-center align-items-center">
                                    <img src="{{ url('img/ibm_logo.png') }}" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col col-12 col-md-6 col-lg-3 my-3">
                                <div class="mx-2 h-100 shadow-lg rounded-3 p-4 bg-white d-flex justify-content-center align-items-center">
                                    <img src="{{ url('img/indosat_logo.png') }}" alt="">
                                </div>
                            </div>
                            <div class="col col-12 col-md-6 col-lg-3 my-3">
                                <div class="mx-2 h-100 shadow-lg rounded-3 p-4 bg-white d-flex justify-content-center align-items-center">
                                    <img src="{{ url('img/line_logo.png') }}" alt="">
                                </div>
                            </div>
                            <div class="col col-12 col-md-6 col-lg-3 my-3">
                                <div class="mx-2 h-100 shadow-lg rounded-3 p-4 bg-white d-flex justify-content-center align-items-center">
                                    <img src="{{ url('img/microsoft_logo.png') }}" alt="">
                                </div>
                            </div>
                            <div class="col col-12 col-md-6 col-lg-3 my-3">
                                <div class="mx-2 h-100 shadow-lg rounded-3 p-4 bg-white d-flex justify-content-center align-items-center">
                                    <img src="{{ url('img/samsung_logo.png') }}" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="shape shape-bottom">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
                        <path class="shape-fill" d="M738,99l262-93V0H0v5.6L738,99z"></path>
                    </svg>
                </div>
            </section>
            <section class="mt-3">
                <div class="container p-3">
                    <div class="text-center" style="margin-bottom: 6rem;">
                        <h2>Alumni Dicoding Academy</h2>
                        <p>Dicoding Academy telah memiliki 33962 alumni yang saat ini bekerja di berbagai perusahaan teknologi atau sebagai co-founder startup digital.</p>
                    </div>
                </div>
            </section>
        </main>
        <footer class="bg-dark p-3">
            <p class="text-white text-center">Copyright 2021 - Dicoding by Muhammad Arif Faizin</p>
        </footer>
        <script>
            document.addEventListener("DOMContentLoaded", () => {
                window.addEventListener('scroll', () => {
                    navbar = document.querySelector('#navbar_top');
                    if(window.scrollY > 100) {
                        navbar.style.backgroundColor = "#2D3E50";
                    } else {
                        navbar.style.backgroundColor = "transparent";
                    }
                })
            })
        </script>
  3. Lalu buat file style.css pada public/css/ dan isikan kode berikut:
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
    *, ::after, ::before {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.custom-logo {
    max-height: 50px;
    width: auto;
}

img {
    max-width: 100%;
    height: auto;
}

.shape {
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 100%;
    line-height: 0;
    direction: ltr;
}

.shape-bottom {
    bottom: -1px;
    transform: rotate(180deg);
}

.shape-top {
    top: -1px;
}

.shape-fill {
    fill: #fff;
}

.bg-gradient-theme {
    background-image: radial-gradient(at top right, #FF5483 0%, #2D3E50 100%);
}
  4. Kemudian upload aset-aset pada website dan sesuaikan penamaannya pada kode


  5. Kemudian jalankan projek tersebut dengan menggunakan perintah php artisan serve pada command-line
  6. Hasil tampilan dari landing page tersebut adalah seperti berikut




Sekian postingan kali ini, mohon maaf apabila ada kekurangan dan semoga bermanfaat.

Comments

Post a Comment

Popular posts from this blog

Tugas 8 PBKK - CodeIgniter : Implemetasi CRUD dalam Toko Online

Nama Anggota : 05111840000132 -  Reihan Nanda Ramadhan  05111940000060 - Muhammad Arif Faizin  05111940000228 - Muhammad Arsyad Ardiansyah Pada post kali ini, kami akan menjelaskan mengenai toko online yang telah kami buat menggunakan CodeIgniter. Toko online kami ini bernama OutFact – Toko yang menjual berbagai barang fashion seperti baju, celana, masker dll. OutFact memiliki 2 role, yaitu Admin dan Customer. Sebelumnya kami akan menjelaskan apa saja fitur-fitur yang dimiliki oleh masing-masing role. Fitur yang ada pada role Customer adalah :           1. Registrasi           2. Login           3. Halaman Awal dan View Product           4. View Detail Product ...
Post a Comment
Read more

EAS MPPL - Demo dan Dokumentasi EAS

 EAS MPPL 2021 Pada kesempatan ini kelompok kami akan menjelaskan salah satu produk perangkat lunak milik Zoho yaitu Zoho Marketing Automation yang dikerjakan secara berkelompok yang beranggotakan: Ricky Supriyanto 05111940000036 Arvel Gavrilla R 05111940000040 M Arif Faizin 05111940000060 Zulfiqar Fauzul Akbar 05111940000101 Raihan Alifianto 05111940000213 Dengan hasil sebagai berikut 1. Deskripsi Produk 2. Manajemen Ruang Lingkup 3. Manajemen Waktu 4. Manajemen Biaya 5. Manajemen Resiko 6. Video demo
Post a Comment
Read more