Model–view–controller is a software architectural pattern commonly used for developing user interfaces that divide the related program logic into three interconnected elements. This is done to separate internal representations of information from the ways information is presented to and accepted from the user.

1. Pemrograman Web dan Konsep
MVC
Pertemuan 4
MK Basis Data
M. N. Fakhruzzaman, S.Kom., M.Sc.
Malikhah, S.Kom., M.Kom.
Program Studi S1 Teknologi Sains Data
Fakultas Teknologi Maju dan Multidisiplin
Universitas Airlangga Indonesia
www.ftmm.unair.ac.id @ftmmunair

2. Review
www.ftmm.unair.ac.id @ftmmunair
• Web programming?
• Language?
• How to serve? What kind of environment?
• Why bother using DB?
• How they communicate?
• HTTP request method?
• CRUD?
• MVC?

3. Model – View - Controller
www.ftmm.unair.ac.id @ftmmunair

4. Intro to MVC
www.ftmm.unair.ac.id @ftmmunair
• Model-view-controller is one of the most popular paradigm in web
application design
• It has been used for the first time in Smalltalk and then adopted and
popularized by Java
• At present there are more than a dozen PHP web frameworks based
on MVC paradigm:
• Laravel
• CodeIgniter
• ZendFramework
• Yii
• CakePHP
• Etc.

5. Model – view – controller
• Used for data-driven user applications
• Such apps juggle several tasks:
• Loading and storing the data – getting it in/out of storage on request
• Constructing the user interface – what the user sees
• Interpreting user actions – deciding whether to modify the UI or data
• These tasks are largely independent of each other
• Model, view, and controller each get one task

7. Why MVC?
• Organization of code
• Maintainable, easy to find what you need
• Ease of development
• Build and test components independently
• Flexibility
• Swap out views for different presentations of the same data (ex: calendar daily, weekly, or
monthly view)
• Swap out models to change data storage without affecting user
• Secure
• With parameterized credentials, it’s harder for hackers to find holes

8. Disadvantages of MVC

9. Model
talks to data source to
retrieve and store data
Which database table is the
requested data stored in?
What SQL query will get me
the data
I need?

10. View
asks model for data and
presents it in a user-
friendly format
Would this text look better
blue or red? In the bottom
corner
or front and center?
Should these items go in a
dropdown list or radio
buttons?

11. Controller
listens for the user to change
data or state in the UI, notifying
the model or view accordingly
The user just clicked the
“hide details” button. I
better tell the view.
The user just changed the
event details. I better let the
model know to update the
data.

12. MVC Communication Flow

14. Example

15. MVC Example: Traffic Light

16. Component Model View Controller
Detect cars waiting to enter intersection
Traffic lights to direct car traffic
Regulate valid traffic movements
Manual override for particular lights
Detect pedestrians waiting to cross
Pedestrian signals to direct pedestrians
External timer which triggers changes at set
interval

17. MVC – Traffic Signal
• Model
• Stores current state of traffic flow
• Knows current direction of traffic
• Capable of skipping a light cycle
• Stores whether there are cars and/or pedestrians waiting
• View
• Conveys information to cars and pedestrians in a specific direction
• Controller
• Aware of model’s current direction
• Triggers methods to notify model that state should change

18. www.ftmm.unair.ac.id @ftmmunair

19. What is Laravel
• Laravel is MVC PHP framework created by Taylor Otwell in 2011
• Free open-source license with many contributors worldwide
• One of the best frameworks together with Symfony, CodeIgniter, Yii
• Has powerful features, saving us time
• Uses Symfony packages
• Super Popular Framework

21. Features
• Query builder – helps you to build secured SQL queries
• Restful controllers – provides a way for separating the different HTTP
requests (GET, POST, DELETE, etc.)
• Blade template engine – combines templates with a data model to
produce views
• Migrations – version control system for database, update your database
easier
• Database seeding – provides a way to populate database tables with test
data used for testing
• Pagination – easy to use advanced pagination functionalities
• Forms security – provides CSRF token middleware, protecting all the forms

22. Prerequisites
• You need to have Apache, MySQL, and PHP installed in your system
• You can use your localhost, or remote host (VPS)
• You need to install composer first
• Installing composer:
• Windows : https://getcomposer.org/Composer-Setup.exe
• UNIX: download this https://getcomposer.org/installer then run
mv composer.phar /usr/local/bin/composer

23. Installing Laravel
• Laravel uses Composer to manage its dependencies
• Composer is dependency management tool for PHP, like a library full
of books
• NOT like Yum or apt
• Per project tool (vendor folder), not per system
• Install by using the command:
composer create-project --prefer-dist laravel/laravel laravel-softuni

24. The structure
app/Http folder contains the Controllers,
Middlewares and Kernel file
All the models should be located in app/Models
folder
All the config files are located in app/config
folder
The service providers that are bootstrapping
functions in our app are located in
app/Providers folder

25. Database folder contains the
migrations and seeds
The public folder is the actual folder you are
opening on the web server.
All JS / CSS / Images / Uploads are located there.
The resources folder contains all the
translations, views and assets (SASS, LESS, JS)
that are compiled into public folder
The routes folder contains all the routes for the
project
All the logs / cache files are located in storage
folder
The vendor folder contains all the composer
packages (dependencies)

26. Artisan !
• Artisan is command-line interface for Laravel
• Commands that are saving time
• Generating files with artisan is recommended
• Run php artisan list in the console

27. Routing
• Routing per middleware / prefix or namespace
• Routing per request method (GET, POST, DELETE, etc.)
• ALWAYS name your route !
• Be careful with the routing order !
• Let’s see routing examples

28. Routing
• Routes are located inside app/Http
• Edit routes.php for routing urls into views!
• Then, make a view with the name ‘welcome’

29. Basic routing cont’d
• resources/view/welcome.blade.php
<!DOCTYPE html>
<html>
<head> <title>Laravel</title>
<link href =
"https://fonts.googleapis.com/css?famil
y=Lato:100" rel = "stylesheet" type =
"text/css">
<style> html, body { height: 100%; }
body { margin: 0; padding: 0; width:
100%; display: table; font-weight: 100;
font-family: 'Lato'; } .container { text-
align: center; display: table-cell;
vertical-align: middle; } .content { text-
align: center; display: inline-block; }
.title { font-size: 96px; } </style>
</head>
<body> <div class = "container"> <div
class = "content"> <div class =
"title">Laravel 5.1</div> </div> </div>
</body>
</html>

30. The flow
• Step 1 − Initially, we should execute the root URL of the
application.
• Step 2 − Now, the executed URL should match with the
appropriate method in the route.php file. In the present case, it
should match the method and the root (‘/’) URL. This will
execute the related function.
• Step 3 − The function calls the template
file resources/views/welcome.blade.php. Next, the function
calls the view() function with argument ‘welcome’ without
using the blade.php.

31. Middleware
• The middleware is mechanism for
filtering the HTTP requests
• Laravel includes several middlewares –
Authentication, CSRF Protection
• The auth middleware checks if the user
visting the page is authenticated through
session cookie
• The CSRF token protection middleware
protects your application from cross-site
request forgery attacks by adding token
key for each generated form
• Try to create your own

32. Blade
• Blade is the powerful template engine provided by Laravel
• All the code inside blade file is compiled to static html file
• Supports plain PHP
• Saves time
• Better components mobility, extend and include partials
• Try to create yours

33. Terima Kasih
www.ftmm.unair.ac.id @ftmmunair