Building custom websites with play 2.6.x(Scala) part 1

in #utopian-io • 7 years ago

Screenshot (67).png

Repository

https://github.com/playframework/playframework

What Will I Learn?

In this tutorial you will learn the following

  • Linking Stylesheets inside play framework
  • Linking Javascript files inside play framework
  • importing assets like images into your application
  • Formatting documents inside play framework using CSS classes
  • How to render web pages using controller actions

Requirements

The following are required in order to properly follow along this tutorial.

  • Intellij IDEA
  • sbt
  • playframework with slick installed
  • Web browser
  • Basic knowledge of Scala programming language
  • Basic knowledge of HTML and CSS

Resources

Difficulty

  • Intermediate

Tutorial Contents

Welcome to today's tutorial on how to build custom websites using play 2.6.x(Scala), In this tutorial series we will be going in depth on how to build web template using scala. I plan to make this tutorial as easy enough to understand as possible. This tutorial will explore play's views capabilities, where will be extending the view template to create websites.

So let's begin by opening up IntelliJ IDEA, and navigate to the following package public, inside the package you will find the following folders ,images and javascripts, create another folder called stylesheet`` this would hold thecss``` files.

The next thing we need to do is to Navigate to our views and this can be found in app/views , inside this package we will create a file known as main, we can do this by:

  • Right clicking views
  • Select New
  • Select Play 2 template
  • Type in the name of the template
  • Click okay
    Screenshot (97).png

Screenshot (98).png

After that is done we will import our CSS stylsheets, Javascripts and even links to images by typing he following code:

@(title: String)(content: Html)

<!DOCTYPE html>

<html>
    <head>
        <title>@title</title>
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")"/>
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("css/stylesheet.css")"/>
    </head>
    <body>
        @content
        <script src="@routes.Assets.versioned("javascripts/jquery-2.2.0.min.js")" type="text/javascript"></script>
    </body>
</html>

Code Explanation

  1. First we define the title and content of the page using the @ symbol. This symbol indicates dynamic content. The title is defined as a String, while the content is defined as HTML.

  2. We place the @title in between the <title> tag. This serves as an instance variable, but will later contain a value in another point in the program.

  3. Still inside the <head> tag we will insert our external stylesheet by typing the following <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("css/stylesheet.css")"/> . External stylesheets can be inserted by specifying stylesheet as the attribute of the link rel

  4. We will then specify the source of the stylesheet by specifying @routes.Assets.versoned("css/stylesheet.css") as the value of the href . The css/stylesheet indicates the path of the stylesheet document, where css and stylesheet.css are the folder and file respectively.

  5. Inside the <body> tag we will put in our @content which represents the content that will be displayed to users.

  6. Still inside our body tag, we will insert an external javascript file. We define this
    <script src="@routes.Assets.versioned("javascripts/jquery-2.2.0.min.js")" type="text/javascript"></script>. The @routes.Assets.versioned("javascripts/jquery-2.2.0.min.js") traces the location of the external javascript, and javascripts/jquery-2.2.0.min.js represents the folder and file respectively.

The next thing we need to is to create another file known as index inside our views folder, and to do that we will do the following:

  • Right clicking views
  • Select New
  • Select Play 2 template
  • Type in the name of the template which is index
  • Click okay

The index view is automatically called once the application loads, so it's whatever is contained in this file that will be displayed to the user. Inside this we will instantiate the title and content and content which have been defined inside in main view. The basic structure of the file looks something like this:

@main("Title of our website") {
    Content of website goes in here 
}

Code Explanation

  1. main view we created earlier, and not to forget, we defined 2 parameters earlier, which are the title and content.The @main is a reference to the

  2. The title of the website is typed inside the bracket that follows the @main, whatever is typed here will be displayed in the title bar of the website.

  3. Inside the brace is our HTML content, this is where we will place all he HTML tags for our web page, as well as forms.

Now let's start typing some HTML inside our views, we will create a menu bar with links as well as some text:

@main("Welcome to our website") {
    <div class="header">

        <div class="main-nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>

        <div class="banner-section">
                    <div class="generic-content">
                        <h2>Page Elements</h2>
                        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    </div>
        </div>

    <div class="sample-text">
        <h3 class="text-heading">Sample Text</h3>
        <p class="sample-text">
            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source
        </p>
    </div>
}

Code explanation

  1. First we define the title of our website by typing values inside the bracket after main, This is what is displayed inside the inside the title bar for the user.

  2. The next thing we need to do is create containers for menu bar links, we have done this by creating a <div> and giving it class called header.

  3. We create links using the unordered lists, and inside it we will create menus which we will call, Home, About, Services and Contact.

  4. The next thing we do is create another container for our banners. We created a div, which we will give a class called banner-section

  5. The banner-section would hold 2 more containers one for generic content which is giving the class generic-content and another called sample-text which would contain some sample text for the sake of this tutorial

Now that our page layout has been created we will then style our document using a stylesheet, so let's open our stylesheet.css file and type the following:

.main-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

.main-nav li {
    float: right;
}

.main-nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.banner-section {
    align-items: center;
    position:relative;
    width:100%;
    height:400px;
    background-color: darkorchid;
}

Code Explanation

  1. The link section is given the class main-nav, so all the formating done inside the class will affect the links in the menu bar

  2. We set the list-style-type to none so as to remove the bullets in our lists, the margin and padding are set to 0, while the background color is given a hexadecimal value of #333

  3. The main-nav li is set to float right, so that the links which are in lists will appear horizontal

  4. We format the links by setting the display to block, the text color is set to white, the elements are aligned in the center, and text-decoration of none removes the default line that appears under the links.

  5. Our banner is defined with the class name banner-section section. The items in this block are aligned to the center by setting the align-items: center, we determine the width and the height by setting the width:100%; height400px. Setting the width to 100% ensures the Banner appears properly.

Creating Actions to render the index page

The next thing we need to do is to create a controller action that would render our index view to display content to the user, so to do that we navigate to app/controller and type in the following.

 def index = Action { implicit request =>
    Ok(views.html.index())
  }

Code Explanation

  1. We define a method known as index which does not accept any parameters

  2. We define an action with an Ok, to display our page. The Ok function displays whatever is contained inside it.

  3. The view.html.index() represents our index view. If we create another page and call it say about, we will call that page in our controller by typing, view.html.about().

Finally we create routes for our index pages by typing the following in our routes file

GET     /                           controllers.PersonController.index

Code Explanation

  1. When we type localhost:9000 to run our application, our index page is called automatically. We done have to add anything after the /
  2. The controllers is a reference the our application controllers, while PersonController is the name of the controller we have created for the sake of this application, and index is the index method defined inside the PersonController controller

Finally to run our application, we will open command prompt and carry out the following steps

  1. Type cd and navigate to the project path
  2. type sbt
  3. Type run to run the application

View screenshot below
Screenshot (100).png

To view the result on a browser open a browser and type localhost:9000

Curriculum

Proof of Work Done

Proof of work done can be found here
https://github.com/leczy642/play-scala-slick-web-template

#tutorials #scala #programming #busy
7 years ago in #utopian-io by
$40.05
  • Past Payouts $40.05
  • - Author $30.32
  • - Curators $9.73
24 votes
Reply 4
Sort:  
  • Trending
    • [-]
     7 years ago  

    I thank you for your contribution. Here are my thoughts;

    • As this is an example of content creation, I suggest you increase the volume of it. Otherwise, that may lead to lower votes in future.

    • Adding GIMP as a resource was unnecessary. Please, don't fill your post with unnecessary resources.

    Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

    To view those questions and the relevant answers related to your post, click here.


    Chat with us on Discord.
    [utopian-moderator]Need help? Write a ticket on https://support.utopian.io/.

    [-]
     7 years ago  

    @yokunjon, thanks for the moderation. I included GIMP because I used it to create screenshots for my tutorial

    [-]
     7 years ago  


    Thanks for contributing on Utopian.
    We’re already looking forward to your next contribution!Hey @leczy

    Want to chat? Join us on Discord https://discord.gg/h52nFrV.

    Vote for Utopian Witness!

    $0.00
      Reply