DEV Community: HZ

CSS Conflicts

HZ — Fri, 08 May 2020 06:33:22 +0000

In this article, I will explain how CSS conflicts are resolved automatically in the browser, what are the concepts for solving issues with contradicting declarations and how to quickly override the default behavior.

Do you prefer video?

There are three possible places where you can have your CSS styles defined.

First, it can be inside the <head> element of the HTML document you want to style. In such case, you need to wrap your stylesheet with the <style> element.

Second, it can be right inside the specific HTML tag. In such case, you need to have your style defined as a value of the style argument of that HTML tag. This is not very useful for big stylesheets.

Third, it can be stored in a separate file which is linked to the HTML document you want to style. In such case, you use the <link> element placed inside the <head> element.

But what would happen if you had two or three styles defined for the same document and they contradict each other?

I will make you a full-stack web developer in just 12 hours!

This tutorial is a part of a much larger and far more detailed online course available for free on Skillshare. If you're new to Skillshare, you'll get premium access not only to this course for free but to all of my other courses as well and for a good measure, to over 22.000 courses currently hosted on Skillshare.

You won't be charged anything for your first 2 months and you can cancel your membership whenever you want within that period. Consider it a 2 months worth of premium education for free. It's like Netflix, only for life-long learners :-)

You can have a CSS rule inside the external file which defines the color of the <p> element as yellow, but at the same time you can have another CSS rule which defines color as red right inside the <p> element.

What would happen? What would be the color? Yellow or red? That's what we are about to find out now.

Download the css-conflicts.zip to the location of your choice, unpack the archive and open the css-conflicts.html file in the code editor. In this file, there are three definitions of the style for the <p> element.

The first one is inside the attached style.css file and it says that the color should be yellow. The second one is inside the <head> element and it says that the color should be blue. And finally, we have a third style as an attribute of the <p> element itself which says that the color should be red.

Now, open the file in the browser to see which color wins. As you can see the color of the text is red, but why?

Priority

There are rules that define the priority of application of styles in case of conflicting definitions. It's in the name of CSS, cascading.

Cascading is the fundamental feature of CSS. It defines how CSS rules from different sources are propagated. Cascading algorithm decides which declaration is applied to any given element and thus solves potential conflicts between declarations.

There are four concepts for solving issues with contradicting declarations and rules:

Origin
Merge
Inheritance
Specificity

Let's look at each of them now.

Origin

The origin precedence rule states that if declarations are in conflict, then the last declaration wins over the previous declarations.

That means the declaration which is the last one in the code. Since HTML is processed sequentially from top to bottom, the bottom-most declaration overrides all the declarations above it.

In case of external CSS file, its position in the document is where the link is placed. Think of it as if the whole content of the linked file is inserted instead of the link, thus the whole stylesheet would be a part of the HTML document.

Merge

When declarations are not in conflict, they just merge into one big declaration and all properties are applied.

In the css-conflicts.html file, add the font-weight declaration to the style for the <p> element placed in the <style> element of the document:

p {
    color: blue;
    font-weight: bold;
}

Also, go to the style.css file and set the background-color to yellow:

p {
    color: yellow;
    background-color: yellow;
}

Save the changes and refresh the page in the browser. You will see the bold red text on the yellow background.

Even though the conflicting text color declarations have been resolved by applying the last declaration, the rest has been merged together.

So, we have the background color defined in the external style.css file, bold text defined in the internal stylesheet inside the <style> element of the document and the text color defined directly inside the <p> element.

To see it in action, just right click the paragraph and select Inspect option to open Chrome Developer Tools in the browser.

Here, you can see the list of styles applied to the paragraph element along their origin and even which style wasn't applied because it was overridden by another style:

Inheritance

If you specify a property for an element, all its descendants will inherit that property.

But how could the browser know about the descendants of a specific element? That's where the DOM, or Document Object Model comes in the scene.

The DOM is an interface that treats HTML document as a tree structure. Each node of this tree is an object that represents a part of the document.

Most web browsers use the internal document object model to render HTML documents. The browser downloads HTML document into local memory and parses it to display the page on the screen.

Once the browser knows which element is a child and which element is a parent, it's easy to apply the Inheritance concept on HTML elements.

You can see the example of DOM tree at the image below:

Don't confuse DOM with BOM. While DOM deals with the HTML elements,
the BOM (Browser Object Model) deals with browser components, such as
history, location, navigator, screen, and so on.

Open the css-inheritance.html file in the browser and select Inspect to display Developer Tools.

As you can see, we have a style defined for the <body> element. This style will be inherited by both <p> elements except for the color of the text of the first <p> element which is directly specified for it as an inline declaration.

The <h1> element will inherit everything from the <body> element. We didn't have to specify any style for the <h1> element, yet it is styled thanks to the inheritance.

Specificity

Specificity concept is based on the rule that the most specific selector combination wins. Selectors have different scores and the highest total score of selectors (or their combinations) wins.

The highest score is 1000 and we will get it if we specify the style directly inside the tag with inline stylesheet:

The lowest score is 0001 which we will get if we define the style for an element. If there are two elements combined, we will get the score 0002, because it has higher specificity:

Let's try to calculate the score for these two examples to see what color will be assigned to the paragraph:

In the first example, we have the element selector (div) and the id selector (#paragraph). So, the style gets 0 points, the id gets 1 point, there's no class, pseudo-class or attribute, so this gets 0 points as well. Finally, the number of affected elements is 1 because there's only the div element in the definition.

In the second example, we have the element-class combinator (div.green) and the element selector (p). So, the style gets 0 points again, the id gets 0 points as well, but there's one class, so this gets 1 point. Finally, we have two elements affected, the div element and the p element, so this gets 2 points.

Based on the calculation, the color of the paragraph should be blue, because the definition for the blue color gets 101 points, while the other definition for the green color gets only 12 points.

Once you have this done, open the css-specificity.html file to see the result. And sure enough, the color of the paragraph is blue indeed.

Important

Sometimes, we don't have time to calculate the score or think about what declaration wins and why. In such cases, the !important rule might be helpful.

Add a new CSS declaration to your css-specificity.html file right above the closing part of the </style> tag:

p {
    color: red !important;
}

Even though this is the least specific selector, it doesn't matter because it will be applied anyway.

Save the changes and refresh the page in the browser to see that the text color of the paragraph will change to red.

I strongly suggest against using the !important rule though, because it will only add to the mess if you start overriding cascading rules everywhere.

Use it wisely, and only if you absolutely must.

Want to learn more?

The rest of this tutorial is available for free on Skillshare as a part of the much larger and far more detailed video course. Again, if you're new to Skillshare, you'll also get premium access to more than 22.000 courses. Remember, that you won't be charged anything for your first 2 months and you can cancel your membership whenever you want within that period. Skillshare is Netflix for life-long learners.

Mastering SQL Basics

HZ — Wed, 26 Feb 2020 10:49:16 +0000

In this show tutorial, I will show you the basics of Structured Query Language, also known as SQL. We'll install together Database Management System as a part of the LAMP stack via XAMPP and I will explain how to use MySQL Command Line Interface in Terminal (or Command Prompt) to communicate directly with your databases without using any middleman interface like phpMyAdmin.

Do your prefer video?

What you'll learn

Once you're all set, we will inspect together the default MySQL databases that come with the XAMPP installation.

I will also teach you how to:

create a new database,
define a new table
delete existing table
insert new record
update existing record
retrieve table data
removing table data

We will take a look at some special table features like primary keys and auto-incrementation.

Finally, we will build a simple table of action movies so you can truly understand how to use SQL language in some real-world scenarios.

I will make you a full-stack web developer in just 12 hours!

Installing XAMPP

In order to work with the SQL-based database, you need to install DBMS (Database Management System), but there's an easier way as you can get it as a part of the development stack. Running DMBS is a matter of one click in such a case.

In this tutorial, we will use XAMPP which is available for both Mac and Windows platforms and it's very easy to install and use, unlike Docker or Vagrant, which are more complicated options.

Go ahead and download the right installer for your operating system from https://www.apachefriends.org/download.html. The installation itself is pretty straightforward. Once you run XAMPP, you should be presented with a Control Panel which looks like this:

Terminal and MySQL CLI

You can't become a real developer without understanding the Terminal. It's like an invitation to a special club for professionals and it will make you see things differently.

These days, people rarely encounter Terminal because everything is hidden under the hood thanks to modern operating systems with GUI (Graphics User Interface).

But some of you might probably remember MS-DOS, a command-line-based operating system from Microsoft.

If you're on Mac, you'll find Terminal as an app from the Spotlight (CMD+SPACE). Once you'll hit Enter, you'll get this window:

If you're on Windows, you can use Command Prompt by clicking the search icon next to the Start icon, type cmd and hit Enter:

MySQL CLI is a Command Line Interface for managing MySQL databases. You'll use it inside the Terminal or Command Prompt and it will look similar to this:

Let's take a look at how to use it with our XAMPP development environment. To access MySQL with XAMPP, we first need to start the service.

On both Mac and Windows, you need to go to XAMPP Control Center and start MySQL Database server:

Next, you need to navigate to the appropriate directory to use MySQL CLI.

On Mac, type these commands in Terminal:

cd /Appplications/XAMPP/xamppfiles/bin

./mysql -uroot

We don't need to type any password since the default configuration of XAMPP has no password set for the root user.

Don't worry if you see MariaDB instead of mysql at the prompt. They both work exactly the same way as far as we are concerned in this tutorial.

On Windows, type these commands in Command Prompt:

cd C:\xampp\mysql\bin

mysql.exe -uroot

Inspecting databases

Now that you know how to connect to MySQL let's start communicating with our database system.

First, we will take a look at all databases available by default:

SHOW DATABASES;

You should always see the information_schema database which stores information about all the other databases that our MySQL server maintains. It's also known as system catalog because you can find there everything about regular databases, like their names, access privileges, types and so on.

To work with a specific database, we need to select it first with the USE command:

USE INFORMATION_SCHEMA;

Now, we can inspect the database content:

SHOW TABLES;

Let's take a look at the structure of the CHARACTER_SETS table:

SHOW COLUMNS FROM CHARACTER_SETS;

When you ask MySQL to show you the columns of the table, they will be listed in rows. This might be confusing at first, but it's actually quite logical. Lists are usually just a bunch of rows, and a list of columns is still the list, hence the rows.

Let's take a look at all records (list of rows) stored in this table:

SELECT * FROM CHARACTER_SETS;

Here, you can see a bunch of rows (records) and four columns.

Creating a new database

Let's create a new database for our movies table:

CREATE DATABASE talker_db;

If you're adventurous, use your own name for this new database. I picked talker_db because that's the name of the database I'm using in Total Web Development Course where I teach total beginners how to create their own Facebook-like social platform with private messaging and groups. If you think you might be interested in such skills, check www.twdc.online for more information about the Total Web Development Course.

Ok, back to our database. Let's check that it was created:

SHOW DATABASES;

And sure enough! It appeared on the list.

When you create a database, it's always empty, but we will learn soon how to add some tables.

To delete the database, you'll use this formula:

DROP DATABASE talker_db;

But be very careful, because once you hit the Enter, there's no way to retrieve your data. It will be lost forever.

Creating a new table

We will create a movies table that will hold information about popular Holywood movies. For each movie, we will store its unique identifier, title, length in minutes, genre and main actor.

This is what we want to achieve:

This means that we need to define five columns with appropriate data types.

When choosing the right data type for the column, it's important to consider the optimum storage size, because each data type reserves a certain amount of memory. It's a good practice to choose data type which can store all possible values and uses the least amount of memory.

First, we need to switch to our talker_db database:

USE talker_db;

Next, we'll create a table by defining its name and columns:

CREATE TABLE movies
(
id int,
title varchar(50),
length tinyint UNSIGNED,
genre varchar(15),
actor varchar(30)
);

It's a good practice to divide long and complicated formulas to individual lines with Enter. Remember that until you write semicolon, you can hit Enter and start typing on the new line. Once you write semicolon and hit Enter, the formula will be executed.

As you can see, MySQL will give you simple feedback: Query OK, 0 rows affected, and the time it took it to create the table.

If anything goes wrong or if you omit some column, you can always start again from scratch.

First, delete the table with this formula:

DROP TABLES movies;

Then, create it again.

Let's inspect the structure of the movies table now:

SHOW COLUMNS FROM movies;

Everything looks good and you might have noticed that MySQL automatically added the maximum length for the int and tinyint data types where we didn't define them explicitly:

As you can see, there are other columns we didn't define at all, Null, Key, Default and Extra.

Null specifies whether the column can be empty.

Key specifies whether the column is indexed.

Default specifies the default value in case no value is explicitly specified when a new record is created. NULL means that the value must be always specified while creating a new record.

Extra specifies any additional information, like ordering, timestamp, and so on.

Let's add a primary key now by modifying the table:

ALTER TABLE movies ADD PRIMARY KEY(id);

And let's display the columns again to see the changes:

SHOW COLUMNS FROM movies;

As you can see, the Null property is no longer YES for the id column, because the primary key can't be empty. And the KEY property has PRI value which stands for PRIMARY.

Let's add the automatic incrementation for the id column so we don't have to increment its value manually for each new record:

ALTER TABLE movies MODIFY id INT AUTO_INCREMENT;

And, let's check the results:

SHOW COLUMNS FROM movies;

And sure enough, the auto_increment was added to the Extra property of the id column.

Inserting table data

Our movies table is still empty as you can check with this formula:

SELECT * FROM movies;

Let's change that by adding some records:

INSERT INTO movies (title, length, genre, actor) VALUES ('The Terminator', 107, 'Sci-Fi', 'Arnold Schwarzenegger');

Make sure you always use single quotation marks when inserting string values. Double quotes can have different meaning based on SQL modes.

Also notice, that we didn't specify any value for the id column as it will be added and incremented automatically.

Let's check our first record:

SELECT * FROM movies;

Great! Let's add some more records:

INSERT INTO movies (title, length, genre, actor) VALUES ('Die Hard', 131, 'Thriller', 'Bruce Willis');

INSERT INTO movies (title, length, genre, actor) VALUES ('First Blood', 93, 'Action', 'Sylvester Stallone');

And let's check the content of the table now:

SELECT * FROM movies;

As you can see, MySQL is happily adding a new id every time you add a new record.

Want to learn more?

The rest of this tutorial is available for free on Skillshare as a part of the much larger and far more detailed video course. Again, if you’re new to Skillshare, you’ll also get premium access to more than 22.000 courses. Remember, that you won’t be charged anything for your first 2 months and you can cancel your membership whenever you want within that period. Skillshare is Netflix for life-long learners.

SwiftUI By Examples

HZ — Thu, 09 Jan 2020 17:35:22 +0000

In this tutorial, I will teach you about SwiftUI, Apple's latest addition to the amazing world of iOS development. SwiftUI is nothing short of a game-changer. It makes the life of iOS developer so much easier and I can't wait to show you all the magic waiting for you.

What we're building

We will go together through the entire process of building the SwiftUI app starting from scratch. We will create a list of fancy conference rooms based on the SwiftUI Introductory session which Apple held in WWDC 2019. Sadly, the code they used in that session is already outdated, so if you follow that video, you'll get stuck pretty quickly.

That's why I have decided to take this tutorial as an opportunity to create an up-to-date version of the app using the latest SwiftUI API. I also wanted to make it more streamlined and easier to understand, even for total beginners.

A shameless plug

If you prefer a video-course version of this text-based tutorial, go get it for free on Skillshare. If you're new to Skillshare, you'll get premium access not only to this course for free, but to all of my other courses as well and for a good measure, to over 22.000 courses currently hosted on Skillshare. You won't be charged anything for your first 2 months and you can cancel your membership whenever you want within that period. Consider it a 2 months worth of premium education for free. It's like Netflix, only for life-long learners :-)

What you'll need

To make the most of this tutorial and to be able to truly follow me step by step, you'll need macOS Catalina or newer and Xcode 11 or newer. With Xcode 11, Apple introduced live previews so you no longer need to compile your project and run it in the Simulator each time you make some changes to your code. However, this feature won't work on older macOS. So even though, you can install Xcode 11 on older macOS, you won't get live previews unless you run Catalina.

Resources

To save your time I prepared some resources so you don't have to manually type everything from scratch. You'll find everything I'm referring to in the video in a package called swiftui-rooms-resources.zip file which you should download and unpack to the location of your choice.

You'll find it at www.zavrel.net/swiftui-rooms-resources

Creating a basic structure

Run Xcode, create a new Single View App project and call it Rooms.

Before you hit the Next button, make sure that the Language is set to Swift and the User Interface to SwiftUI.

In the next window, check the Source Control and save the project to the Desktop.

This is what your Xcode project should look like.

I hope you're at least somewhat familiar with Xcode. If you're on Catalina, you'll notice the column with automatic preview and you'll probably see the message that "Automatic preview updating paused". When you click the tiny icon next to the message, you'll get the explanation that this is perfectly normal when you make such changes that Xcode has to rebuild your project.

Go ahead and click the Resume button to the right:

You should see the preview of the iPhone with a simple welcome message at the center of the screen. To have more real estate for coding, let's hide the right pane by click this icon:

If you've been working with Storyboards in the past, this might look familiar. However, with Storyboards, you had to choose whether you wanted to code manually or to build your app with visual items. You couldn't use both at the same time. With SwiftUI, you can go back and forth as you'll soon see.

Go ahead and click the Hello World text on the canvas. It will be automatically selected in the code.

Now, change the text in the code to Rooms and see what happens in the canvas:

That's right. The code and the canvas work together seamlessly!

Since we want to create a list of rooms, let's add some more details about them. This time, though, we will take a visual approach and add a new text by just dragging it out onto the canvas.

Click the big + button at the top and drag the Text view:

Not only Xcode added the text onto the canvas, but as you can see, it also updated the code and automatically added a vertical stack so both text views are nicely stacked under each other.

Working with Source Control

Now I hope you've noticed that blue ribbon in the code gutter. This is Git tracking the changes. Click the ribbon and select Show Change from the popup menu to reveal what changes you have made to the code so far. The gray section shows the deleted code and the blue section shows added code. Now, you can commit these changes. This will save this state of the project so you can later return to it if anything goes wrong.

Select Source Control → Commit... from the top menu:

You'll be presented with a new window where you can select the ContentView.swift file to see the changes.

Type the commit message at the bottom of the window and click the Commit 1 File button.

Once you do that, the blue ribbon will disappear, but you can always check the history to see your commits by clicking the Source Control navigator in the top menu, selecting the master branch, and double-clicking the commit:

Cool! Now that you know how to commit the changes to your code and build the history, I suggest you do it often, or at least whenever you make some big changes to your code which could potentially lead to disaster. It's better to be safe than sorry and rewrite your work from scratch.

Fine-tuning the layout

Ok, let's go back to our code and replace the Placeholder text with the number of people our room can hold. We will initially use the hard-coded value:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Rooms")
            Text("20 people")
        }
    }
}

As you'd expect. Two things will happen immediately:

There's a new blue ribbon as we made a change to our code since the last commit
Canvas has been updated with a new text

Let's add some image to our room now. With SwiftUI, it's very easy to add a column by using HStack which stands for a horizontal stack. This way, we can define a new column for the image.

Let's wrap our VStack in the HStack to achieve this.

CMD-Click the VStack and select Embed in HStack from the menu:

Now we can easily add the image in front of the room description and it will end up in the left column:

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "photo")
            VStack {
                Text("Rooms")
                Text("20 people")
            }
        }
    }
}

This is the placeholder using the SF Symbols which is a set of over 1,500 highly configurable symbols that you can use in your iOS 13, watchOS 6 and tvOS 13 apps. They come in nine weights and three scales, small, medium and large.

Let's change some properties of our VStack now.

In canvas, CMD+Click the VStack and choose Show SwiftUI Inspector... from the popup menu:

Set the Alignment to leading and watch how the code will change:

Now, let's change the text size of the second Text view and set it to subheadline.

CMD+Click that text in canvas, choose Show SwiftUI Inspector... again and change the Font to Subheadline:

Your code should look like this now:

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "photo")
            VStack(alignment: .leading) {
                Text("Rooms")
                Text("20 people")
                    .font(.subheadline)
            }
        }
    }
}

The .font(.subheadline) is the so-called modifier. It's a kind of SwiftUI method that customizes how the specific View looks and behaves.

Let's add another modifier in the code now to change the color of the second Text View to be a secondary color:

VStack(alignment: .leading) {
    Text("Rooms")
    Text("20 people")
        .font(.subheadline)
        .foregroundColor(.secondary)
}

Again, this change will immediately update the canvas where the text is gray now:

Creating a list of items

Ok, now it's time to create a list of rooms and you'll see how ridiculously easy it is in SwiftUI. CMD-Click the HStack and select Embed in List from the popup menu:

By default, Xcode will create a list of five items. And, as you might expect, that code changes will be rendered in the canvas as well:

Ok, now it's time to add some external data, so open the swift-room-resources folder and drag everything to Xcode's Project navigator in the left pane:

Let's take a look at the Room.swift file.

import SwiftUI

struct Room: Identifiable {
    var id = UUID()
    var name: String
    var building: String
    var floor: String
    var capacity: Int
    var hasVideo: Bool = false
    var imageName: String
}

let testData = [
    Room(name: "Tree Room", building: "A", floor: "1", capacity: 6, hasVideo: true, imageName: "room01"),
    Room(name: "Lamp & Pillows", building: "B", floor: "1", capacity: 8, hasVideo: false, imageName: "room02"),
    Room(name: "Red Looks Great", building: "D", floor: "2", capacity: 16, hasVideo: true, imageName: "room03"),
    Room(name: "Bug On The Wall", building: "A", floor: "3", capacity: 10, hasVideo: true, imageName: "room04"),
    Room(name: "Candles", building: "C", floor: "3", capacity: 12, hasVideo: false, imageName: "room05"),
    Room(name: "Queen Size", building: "F", floor: "1", capacity: 8, hasVideo: false, imageName: "room06"),
    Room(name: "Small But Sweet", building: "E", floor: "1", capacity: 10, hasVideo: true, imageName: "room07"),
    Room(name: "Modern Screen", building: "B", floor: "4", capacity: 7, hasVideo: false, imageName: "room08"),
    Room(name: "Yellow Matrix", building: "D", floor: "3", capacity: 1, hasVideo: false, imageName: "room09")
]

It contains the Room struct which has seven properties that define the id and the name of the room as well as where the room is located, what's its capacity, whether it has video conferencing setup and finally, even the photo of the room.

Our struct conforms to Identifiable protocol which means that it can be identified uniquely. Also, there must be a property called id that contains a unique identifier. As you can see, we covered that as well by defining the id property as UUID() which stands for a universally unique identifier.

UUIDs are long hexadecimal strings such as 08B15DB4-2F02-4AB8-A965-67A9C90D8A44. If we generated 1 UUID every second for a billion years, we might begin to have the slightest chance of generating a duplicate, so I guess this is indeed a pretty unique identifier.

Below the struct definition, we have an array of nine instances of Room struct, each holding its own set of properties with specific values. We will use these test data for debugging our app.

Now, to pass our test data from the Room.swift file, we need to add a new property to our ContentView struct. So back in the ContentView.swift file, add a new variable named rooms which is an array of instances of the Room struct:

struct ContentView: View {
    var rooms: [Room] = []
    
    var body: some View {
        List(0 ..< 5) { item in
            Image(systemName: "photo")
            VStack(alignment: .leading) {
                Text("Rooms")
                Text("20 people")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
    }
}

Next, we'll pass our test data to the preview:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(rooms: testData)
    }
}

This means that we just use the testData array defined in the Rooms.swift file.

Now we can finally use our test data in the list instead of hardcoded values.

So we will list the items of the rooms array while each item will be referred to as room. This way, we can access the properties of an individual item, like a name:

var body: some View {
        List(rooms) { room in
            Image(systemName: "photo")
            VStack(alignment: .leading) {
                Text(room.name)
                Text("20 people")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
}

And sure enough! Our list of rooms is immediately updated in the preview so it shows all nine items and their names coming from the testData array.

I'll just commit the changes because this is a huge step forward!

Adding more details about rooms

Ok, let's use another information from our test data, which is the capacity of people for each room:

var body: some View {
    List(rooms) { room in
        Image(systemName: "photo")
        VStack(alignment: .leading) {
            Text(room.name)
            Text("20\(room.capacity) people")
                .font(.subheadline)
                .foregroundColor(.secondary)
        }
    }
}

Putting the room.capacity property inside the backslash and parentheses (room.capacity) allows us to directly transfer the Int type to String type. This is a so-called string interpolation which is just a fancy name for combining variables and constants inside the string.

Finally, we can use real images for our rooms instead of the system placeholders:

var body: some View {
    List(rooms) { room in
        Image(systemName: "photo"room.imageName)
        VStack(alignment: .leading) {
            Text(room.name)
            Text("\(room.capacity) people")
                .font(.subheadline)
                .foregroundColor(.secondary)
        }
    }
}

Ok, but this is not what we wanted to achieve here:

The problem is that Xcode will use the original image size by default and since our room photos are 1024x1024 pixels, one image will easily use the whole screen and some more.

But, there's an easy fix.

First, we need to tell SwiftUI that are images are resizeable, next, we will change their size to 50x50 pixels:

var body: some View {
    List(rooms) { room in
        Image(room.imageName)
            .resizable()
            .frame(width: 50.0, height: 50.0)
        VStack(alignment: .leading) {
            Text(room.name)
            Text("\(room.capacity) people")
                .font(.subheadline)
                .foregroundColor(.secondary)
        }
    }
}

Now it looks much better, but I want to add one final touch. Let's make the corners rounded:

var body: some View {
    List(rooms) { room in
        Image(room.imageName)
            .resizable()
            .frame(width: 50.0, height: 50.0)
            .cornerRadius(10)
        VStack(alignment: .leading) {
            Text(room.name)
            Text("\(room.capacity) people")
                .font(.subheadline)
                .foregroundColor(.secondary)
        }
    }
}

Now, it's absolutely perfect!

Don't forget to commit the changes so we can move on.

Adding navigation links

Now we want to be able to tap our individual list items to see more details about each room.

First, we need to wrap our list in the NavigationView:

var body: some View {
    NavigationView {
        List(rooms) { room in
            Image(room.imageName)
                .resizable()
                .frame(width: 50.0, height: 50.0)
                .cornerRadius(10)
            VStack(alignment: .leading) {
                Text(room.name)
                Text("\(room.capacity) people")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
    }
}

Next, we will add the title for the navigation bar:

var body: some View {
    NavigationView {
        List(rooms) { room in
            Image(room.imageName)
                .resizable()
                .frame(width: 50.0, height: 50.0)
                .cornerRadius(10)
            VStack(alignment: .leading) {
                Text(room.name)
                Text("\(room.capacity) people")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
        .navigationBarTitle("Rooms")
    }
}

In order to be able to make our items clickable, or rather tappable, we need to transform them into buttons. This is pretty easy. We'll just wrap the items in NavigationLink which takes a destination which will be our detail view, but we'll start with a simple text for now and display just the room name:

var body: some View {
    NavigationView {
        List(rooms) { room in
            NavigationLink(destination: Text(room.name)) {
                Image(room.imageName)
                    .resizable()
                    .frame(width: 50.0, height: 50.0)
                    .cornerRadius(10)
                VStack(alignment: .leading) {
                    Text(room.name)
                    Text("\(room.capacity) people")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                }
            }
        }
    .navigationBarTitle("Rooms")
    }
}

Notice how SwiftUI automatically added an arrow next to each item that indicates that there's more content available.

Now, click the play button to test the behavior of the app:

You'll get to the live mode, where you can interact with the preview. You should be able to tap each item and see the name of the room in the middle of the screen. You can also go back by tapping the < Rooms link at the top-left corner. Alternatively, you can also swipe from the left edge as you'll familiar with from your iPhone, and everything works as expected without writing any additional code. That's the power of SwiftUI.

When you're done, hit the blue stop button:

Great job! Let's commit our changes.

Extracting Subview

Now I'll show you how to make the code more organized and readable by extracting subviews.

CMD-Click the NavigationLink view and choose Extract Subview from the popup-menu:

Xcode will create a new struct with the extracted content and we'll link it back by choosing the name for our new View which will be RoomCell in our case:

As you can see, we have an unresolved identifier "room" which means that we didn't pass the room instance to this subview yet.

To fix this, we need to:

create the room constant of the Room type in our subview
pass the room parameter when calling our newly created RoomCell subview

struct RoomCell: View {
    let room: Room
    
    var body: some View {
        NavigationLink(destination: Text(room.name)) {
            Image(room.imageName)
                .resizable()
                .frame(width: 50.0, height: 50.0)
                .cornerRadius(10)
            VStack(alignment: .leading) {
                Text(room.name)
                Text("\(room.capacity) people")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
    }
}

var body: some View {
    NavigationView {
        List(rooms) { room in
            RoomCell(room: room)
        }
    .navigationBarTitle("Rooms")
    }
}

We didn't add any new functionality with this modification, but we made our code more readable because the body now contains just the list of room instances that are defined in the RoomCell struct.

You can test in the live mode that everything works exactly as before we changed this.

When you're done, commit the changes so we can move on.

Creating a detail view

Ok, let's build our detail view now.

We'll create a new file with the SwiftUI template, so go to File → New → File... (or click CMD+N) and select SwiftUI View in iOS tab:

Let's save it as RoomDetail.

As you can see, Xcode created a new View struct and preview code:

Now, to see the content of our test data list of rooms, we need to add a new property to our RoomDetail struct and pass it to the preview as well.

First, create a new constant named room which is a type of Room:

struct RoomDetail: View {
    let room: Room
    
    var body: some View {
        Text("Hello, World!")
    }
}

Next, let's call the RoomDetail struct to create an instance with values loaded from the first item in our testData array:

struct RoomDetail_Previews: PreviewProvider {
    static var previews: some View {
        RoomDetail(room: testData[0])
    }
}

Finally, we can use that data in the body of our detail view.

Let's load the image first:

struct RoomDetail: View {
    let room: Room
    
    var body: some View {
        Text("Hello, World!")
        Image(room.imageName)
    }
}

As you can see, this will load the image of the first room from our list:

But unfortunately, it's too large for our view, because, as you already know, SwiftUI shows all images at their original size by default.

Luckily, there's an easy fix we already used. So let's add the .resizable() modifier to our image, and to maintain its aspect ratio, we'll add another modifier, the .aspectRatio with contentMode set to .fit:

struct RoomDetail: View {
    let room: Room
    
    var body: some View {
        Image(room.imageName)
            .resizable()
            .aspectRatio(contentMode: .fit)
    }
}

Great job! Let's commit the changes so we can move on.

Now we need to update the items so they push our newly-created RoomDetail view once tapped.

So go back to the ContentView.swift file and update the destination of the NavigationLink:

var body: some View {
    NavigationLink(destination: Text(room.name)RoomDetail(room: room)) {
        Image(room.imageName)
            .resizable()
            .frame(width: 50.0, height: 50.0)
            .cornerRadius(10)
        VStack(alignment: .leading) {
            Text(room.name)
            Text("\(room.capacity) people")
                .font(.subheadline)
                .foregroundColor(.secondary)
        }
    }
}

Run the live mode in Preview and tap any item to see the appropriate image of the room:

Ok, let's add the title of the detail view.

Go back to the RoomDetail.swift file and add another modifier to the Image:

var body: some View {
    Image(room.imageName)
        .resizable()
        .aspectRatio(contentMode: .fit)
        .navigationBarTitle(Text(room.name))
}

To see it in the preview, just wrap RoomDetail in the Navigation View like this:

struct RoomDetail_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView { RoomDetail(room: testData[0]) }
    }
}

And sure enough, the room name is finally there:

One last thing. Let's make the display mode to be inline for the title so it looks more professional:

var body: some View {
    Image(room.imageName)
        .resizable()
        .aspectRatio(contentMode: .fit)
        .navigationBarTitle(Text(room.name), displayMode: .inline)
}

Now it's much better:

Zooming the image

Now we want to be able to change the contentMode of the aspectRatio from .fit to .fill to be able to see the details of the room image. Yes, we could do it by constantly changing the code like this, but it's out of the question for the regular user so we need to find another way.

First, we'll add a new property that will automatically keep the state of the image, that is whether it's zoomed or not:

struct RoomDetail: View {
    let room: Room
    @State private var zoomed = false
    
    var body: some View {
        Image(room.imageName)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .navigationBarTitle(Text(room.name), displayMode: .inline)
    }
}

Next, we'll test whether zoomed is true or false and change the contentMode of the aspectRatio accordingly:

struct RoomDetail: View {
    let room: Room
    @State private var zoomed = false
    
    var body: some View {
        Image(room.imageName)
            .resizable()
            .aspectRatio(contentMode: zoomed ? .fill : .fit)
            .navigationBarTitle(Text(room.name), displayMode: .inline)
    }
}

This is just a shorthand of the if - else code, also known as ternary operator. Basically, you test if the first condition is true (in our case if zoomed is true) and if it is, you'll apply the value behind the question mark, otherwise, you'll apply the value behind the colon.

You'll probably more familiar with this code, but it has the same meaning:

if zoomed {
    .fill
}else{
    .fit
}

Finally, we need to add a tap gesture which will toggle our zoomed property:

struct RoomDetail: View {
    let room: Room
    @State private var zoomed = false
    
    var body: some View {
        Image(room.imageName)
            .resizable()
            .aspectRatio(contentMode: zoomed ? .fill : .fit)
            .navigationBarTitle(Text(room.name), displayMode: .inline)
            .onTapGesture {
                self.zoomed.toggle()
            }
    }
}

Now, activate the live mode and tap on the image a few times to see how it nicely zooms in and out.

One last thing would be to animate the change so it's more subtle. This is very easy, just wrap the toggle command inside the withAnimation {}

.onTapGesture {
    withAnimation { self.zoomed.toggle() }
}

Test the zooming again. It looks much better now!

Commit the changes so we can move on.

Adding a video icon

Let's add a video icon to the detail view which will indicate whether the room has video-conferencing capabilities. To add views on top of each other, we use the ZStack, so wrap the Image view inside the ZStack and add a new view below it like this:

struct RoomDetail: View {
    let room: Room
    @State private var zoomed = false
    
    var body: some View {
        ZStack {
            Image(room.imageName)
                .resizable()
                .aspectRatio(contentMode: zoomed ? .fill : .fit)
                .navigationBarTitle(Text(room.name), displayMode: .inline)
                .onTapGesture {
                    withAnimation { self.zoomed.toggle() }
                }
            
            Image(systemName: "video.fill")
        }
    }
}

And, as you can see the video icon appear in the middle of the screen:

But it's too small, so let's make it larger. Since it's actually a font, we can use a .font modifier:

var body: some View {
    ZStack {
        Image(room.imageName)
            .resizable()
            .aspectRatio(contentMode: zoomed ? .fill : .fit)
            .navigationBarTitle(Text(room.name), displayMode: .inline)
            .onTapGesture {
                withAnimation { self.zoomed.toggle() }
            }
        
        Image(systemName: "video.fill")
            .font(.title)
    }
}

Now, let's place the video icon to the top-left corner of the room image:

var body: some View {
    ZStack(alignment: .topLeading) {
        Image(room.imageName)
            .resizable()
            .aspectRatio(contentMode: zoomed ? .fill : .fit)
            .navigationBarTitle(Text(room.name), displayMode: .inline)
            .onTapGesture {
                withAnimation { self.zoomed.toggle() }
            }
        
        Image(systemName: "video.fill")
            .font(.title)
    }
}

And to make it even better-looking, we can add some padding:

var body: some View {
    ZStack(alignment: .topLeading) {
        Image(room.imageName)
            .resizable()
            .aspectRatio(contentMode: zoomed ? .fill : .fit)
            .navigationBarTitle(Text(room.name), displayMode: .inline)
            .onTapGesture {
                withAnimation { self.zoomed.toggle() }
            }
        
        Image(systemName: "video.fill")
            .font(.title)
            .padding(.all)
    }
}

Now it looks fantastic!

Ok, as always, before we move on, commit the changes.

Adding a flexible frame

What if we want the video icon to be at the very top-left corner of the screen rather than the room image?

We can achieve that by adding the flexible frame modifier to the Image view and specify its width and height so it stretches to fill the whole screen while keeping the room image in its place:

var body: some View {
    ZStack(alignment: .topLeading) {
        Image(room.imageName)
            .resizable()
            .aspectRatio(contentMode: zoomed ? .fill : .fit)
            .navigationBarTitle(Text(room.name), displayMode: .inline)
            .onTapGesture {
                withAnimation { self.zoomed.toggle() }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        
        Image(systemName: "video.fill")
            .font(.title)
            .padding(.all)
    }
}

Now, we want our video icon to appear only when the room has video-conferencing capabilities.

So we'll display the video icon only if the room.hasVideo property is true:

var body: some View {
    ZStack(alignment: .topLeading) {
        Image(room.imageName)
            .resizable()
            .aspectRatio(contentMode: zoomed ? .fill : .fit)
            .navigationBarTitle(Text(room.name), displayMode: .inline)
            .onTapGesture {
                withAnimation { self.zoomed.toggle() }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        
        if room.hasVideo {
            Image(systemName: "video.fill")
                .font(.title)
                .padding(.all)
        }
    }
}

And to check that it's working, we can change the room in our preview data to the one which doesn't have video-conferencing capabilities, so its hasVideo property is false.

Go to the Room.swift file to see that the second room is one of those. Back to the RoomDetail.swift file, let's change the index of the array from 0 to 1 to show the second room:

struct RoomDetail_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView { RoomDetail(room: testData[01]) }
    }
}

And sure enough! The video icon is gone!

But there's an even better solution. We can have multiple previews, each with a different room. To display multiple previews, we just need to group them, so CMD+Click the NavigationView in the preview section and select the Group option:

Now we can create a second version of the preview using different test data:

struct RoomDetail_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            NavigationView { RoomDetail(room: testData[0]) }
            NavigationView { RoomDetail(room: testData[1]) }
        }
    }
}

Amazing! Now we can see both previews at the same time!

Commit the changes.

Animating video icon

Now we want to improve the video icon behavior so that it disappears when the image is zoomed.

To do that, we'll just update our condition for showing the video icon like this:

var body: some View {
    ZStack(alignment: .topLeading) {
        Image(room.imageName)
            .resizable()
            .aspectRatio(contentMode: zoomed ? .fill : .fit)
            .navigationBarTitle(Text(room.name), displayMode: .inline)
            .onTapGesture {
                withAnimation { self.zoomed.toggle() }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        
        if room.hasVideo && !zoomed {
            Image(systemName: "video.fill")
                .font(.title)
                .padding(.all)
        }
    }
}

Go ahead and test it in the live mode. When you zoom the image, the video icon disappears. Perfect!

Let's make it even better by making the icon slides out and in:

if room.hasVideo && !zoomed {
      Image(systemName: "video.fill")
          .font(.title)
          .padding(.all)
          .transition(.move(edge: .leading))
}

And let's test it again. Now it's much better!

Finally, we can change the duration of the animation to really appreciate its beauty:

var body: some View {
    ZStack(alignment: .topLeading) {
        Image(room.imageName)
            .resizable()
            .aspectRatio(contentMode: zoomed ? .fill : .fit)
            .navigationBarTitle(Text(room.name), displayMode: .inline)
            .onTapGesture {
                withAnimation(.linear(duration: 2)) { self.zoomed.toggle() }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        
        if room.hasVideo && !zoomed {
            Image(systemName: "video.fill")
                .font(.title)
                .padding(.all)
                .transition(.move(edge: .leading))
        }
    }
}

Great job!

Commit the changes.

Adding room details

Now it's time to make the detailed view really detailed by adding some more information about each room, specifically, where exactly it's located.

You already know how to do this.

First, let's add a Text view with the building number above the Image view:

var body: some View {
    ZStack(alignment: .topLeading) {
        
        Text("Building: \(room.building)")
            .bold()
            .frame(maxWidth: .infinity, alignment: .center)
        
        Image(room.imageName)
            .resizable()
            .aspectRatio(contentMode: zoomed ? .fill : .fit)
            .navigationBarTitle(Text(room.name), displayMode: .inline)
            .onTapGesture {
                withAnimation(.linear(duration: 2)) { self.zoomed.toggle() }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        
        if room.hasVideo && !zoomed {
            Image(systemName: "video.fill")
                .font(.title)
                .padding(.all)
                .transition(.move(edge: .leading))
        }
    }
}

Next, let's add another one with the floor number:

var body: some View {
    ZStack(alignment: .topLeading) {
        
        Text("Building: \(room.building)")
            .bold()
            .frame(maxWidth: .infinity, alignment: .center)
        
        Text("Floor: \(room.floor)")
            .italic()
            .frame(maxWidth: .infinity, alignment: .center)
        
        Image(room.imageName)
            .resizable()
            .aspectRatio(contentMode: zoomed ? .fill : .fit)
            .navigationBarTitle(Text(room.name), displayMode: .inline)
            .onTapGesture {
                withAnimation(.linear(duration: 2)) { self.zoomed.toggle() }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        
        if room.hasVideo && !zoomed {
            Image(systemName: "video.fill")
                .font(.title)
                .padding(.all)
                .transition(.move(edge: .leading))
        }
    }
}

Both of these values come from our testData array defined in the Room.swift file.

But, as you can see, those two texts ended up on each other. Luckily, there's an easy fix. All we need to do is wrapping those Text views in the VStack:

var body: some View {
    ZStack(alignment: .topLeading) {
        
        VStack {
            Text("Building: \(room.building)")
                .bold()
                .frame(maxWidth: .infinity, alignment: .center)
            
            Text("Floor: \(room.floor)")
                .italic()
                .frame(maxWidth: .infinity, alignment: .center)
        }
        
        Image(room.imageName)
            .resizable()
            .aspectRatio(contentMode: zoomed ? .fill : .fit)
            .navigationBarTitle(Text(room.name), displayMode: .inline)
            .onTapGesture {
                withAnimation(.linear(duration: 2)) { self.zoomed.toggle() }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        
        if room.hasVideo && !zoomed {
            Image(systemName: "video.fill")
                .font(.title)
                .padding(.all)
                .transition(.move(edge: .leading))
        }
    }
}

Finally, let's add the VStack some padding so the text isn't so cramped up at the top edge:

VStack {
    Text("Building: \(room.building)")
        .bold()
        .frame(maxWidth: .infinity, alignment: .center)
    
    Text("Floor: \(room.floor)")
        .italic()
        .frame(maxWidth: .infinity, alignment: .center)
}
.padding(.all)

Now it's perfect! Notice how both previews use the appropriate room information.

Commit the changes.

Changing the data source

Our list of rooms is loaded from the static array, but we want to be able to add new rooms, delete them and change their order. This means that we need to change the source of data from the static array to the dynamic object.

We will create a new file called RoomStore.swift where we will define an object for storing our data so we can change them over time.

CMD+N to create a new Swift file and save it as RoomStore:

Next, place this code inside instead of the default code:

import SwiftUI
import Combine

class RoomStore {
    var rooms: [Room]
    
    init(rooms: [Room] = []) {
        self.rooms = rooms
    }
    
}

This is just a regular Swift object with the rooms property and class initializer. Now we need to tell SwiftUI when the object based on this class changes. To do that, we just conform the class to the ObservableObject protocol:

class RoomStore: ObservableObject {
    var rooms: [Room]
    
    init(rooms: [Room] = []) {
        self.rooms = rooms
    }
    
}

Next, we need to define the objectWillChangeProperty which will store the PassthroughSubject that broadcasts elements to the subscriber. That's why we need to import the Combine model. You can think of it as some kind of notification center.

class RoomStore: ObservableObject {
    var rooms: [Room]
    
    init(rooms: [Room] = []) {
        self.rooms = rooms
    }
    
    let objectWillChange = PassthroughSubject<Void, Never>()
    
}

Finally, we will add the willSet method to our rooms so we can notify our subject when our rooms changed:

class RoomStore: ObservableObject {
    var rooms: [Room] {
        willSet { objectWillChange.send() }
    }
    
    init(rooms: [Room] = []) {
        self.rooms = rooms
    }
    
    let objectWillChange = PassthroughSubject()
    
}

Now, go back to the ContentView.swift file and update the code.

Instead of rooms array, we will use our RoomStore object:

struct ContentView: View {
    var rooms: [Room] = []
    @ObservedObject var store = RoomStore()
    
    var body: some View {
        NavigationView {
            List(rooms) { room in
                RoomCell(room: room)
            }
        .navigationBarTitle("Rooms")
        }
    }
}

Notice that we use the @ObservedObject when we define the store property. This tells SwiftUI to listen for changes to this property.

Let's also update our preview accordingly:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(rooms: testData)
        ContentView(store: RoomStore(rooms: testData))
    }
}

And finally, we'll update our list to pull the rooms from the RoomStore:

struct ContentView: View {
    @ObservedObject var store = RoomStore()
    
    var body: some View {
        NavigationView {
            List(store.rooms) { room in
                RoomCell(room: room)
            }
        .navigationBarTitle("Rooms")
        }
    }
}

Great job!

As you can see in the preview, everything works just fine as before, only this time, we pull rooms from our object instead of the array. This means we are ready to add our editing support since we no longer use a static source of data. And we will start by adding a button to our list that will allow us to add new rooms.

But before that, commit the changes.

Adding a new room

First, let's add a ForEach that will create a view for each item in its collection:

struct ContentView: View {
    @ObservedObject var store = RoomStore()
    
    var body: some View {
        NavigationView {
              List(store.rooms) { room in
                RoomCell(room: room)
              }
              List {
                ForEach (store.rooms) { room in
                    RoomCell(room: room)
                }
              }
        .navigationBarTitle("Rooms")
        }
    }
}

Now we can have a static element, that is our button alongside the list of rooms. So let's add the button. Drag it from the library right above the ForEach inside the List:

Make sure to place it in the right spot. This is what it looks like in the code:

var body: some View {
    NavigationView {
        List {
            Button(action: {}) {
                Text("Button")
            }
            ForEach (store.rooms) { room in
                RoomCell(room: room)
            }
        }
    .navigationBarTitle("Rooms")
    }
}

Now, let's update the Text so it shows "Add Room" instead of just "Button" and also, let's add a new method to specify the action for that button:

struct ContentView: View {
    @ObservedObject var store = RoomStore()
    
    var body: some View {
        NavigationView {
            List {
                Button(action: {}) {
                    Text("ButtonAdd Room")
                }
                ForEach (store.rooms) { room in
                    RoomCell(room: room)
                }
            }
        .navigationBarTitle("Rooms")
        }
    }
    
    func addRoom() {
            store.rooms.append(Room(name: "Hall 2", building: "A", floor: "3", capacity: 2000, hasVideo: false, imageName: "room10"))
    }
}

The addRoom() method just appends a new instance of the Room struct to our object. We'll call it Hall 2 inside the building A on floor 3 with the capacity of 2000 seats and the image is room10.

Finally, we'll update the action of our button so it uses this new addRoom() method:

    
struct ContentView: View {
    @ObservedObject var store = RoomStore()
    
    var body: some View {
        NavigationView {
            List {
                Button(action: {}addRoom) {
                    Text("Add Room")
                }
                ForEach (store.rooms) { room in
                    RoomCell(room: room)
                }
            }
        .navigationBarTitle("Rooms")
        }
    }
    
    func addRoom() {
            store.rooms.append(Room(name: "Hall 2", building: "A", floor: "3", capacity: 2000, hasVideo: false, imageName: "room10"))
    }
}

Great job! Now, go to live mode and tap the Add Room button. A new room will be added at the bottom of the list and you can even tap it to reveal its details.

Finally, let's style our list so it looks even better.

To do that, we'll just put the Add Room button and the list of rooms into separate sections and style our list and SwiftUI will do the rest for us.

var body: some View {
    NavigationView {
        List {
            Section {
                Button(action: addRoom) {
                    Text("Add Room")
                }
            }
            Section {
                ForEach (store.rooms) { room in
                    RoomCell(room: room)
                }
            }
        }
        .navigationBarTitle("Rooms")
        .listStyle(GroupedListStyle())
        
    }
}

Now it looks way better:

Ok, commit the changes so we can move on.

Deleting items

Let's add the deletion feature to our list.

First, we'll define a new method below the addRoom() method and call it the deleteRoom(). We'll pass in some Offsets. Than we will tell the store to remove the room at those offsets:

func addRoom() {
      store.rooms.append(Room(name: "Hall 2", building: "A", floor: "3", capacity: 2000, imageName: "room10"))
}
    
func deleteRoom(at offsets: IndexSet) {
      store.rooms.remove(atOffsets: offsets)
}

Then, we'll add the .onDelete modifier to the ForEach and we'll pass in as a parameter our deleteRoom() method:

var body: some View {
    NavigationView {
        List {
            Section {
                Button(action: addRoom) {
                    Text("Add Room")
                }
            }
            Section {
                ForEach (store.rooms) { room in
                    RoomCell(room: room)
                }
                .onDelete(perform: deleteRoom)
            }
        }
        .navigationBarTitle("Rooms")
        .listStyle(GroupedListStyle())
        
    }
}

Now, go to the live mode, swipe on one of the rows and click to delete it! Or, you can even swipe all the way to the left as you might expect.

Reordering items

Let's take our list to the edit mode so we can not only delete items but reorder them as well.

First, let's create the Edit button via navigationBarItems like this:

var body: some View {
    NavigationView {
        List {
            Section {
                Button(action: addRoom) {
                    Text("Add Room")
                }
            }
            Section {
                ForEach (store.rooms) { room in
                    RoomCell(room: room)
                }
                .onDelete(perform: deleteRoom)
            }
        }
        .navigationBarTitle("Rooms")
        .navigationBarItems(trailing: EditButton())
        .listStyle(GroupedListStyle())
        
    }
}

Next, let's add a new moveRoom() method for moving the item and we'll move from the source which is IndexSet to a destination which is Integer. And inside, we'll call our store and tell it to move the item:

func addRoom() {
    store.rooms.append(Room(name: "Hall 2", building: "A", floor: "3", capacity: 2000, imageName: "room10"))
}

func deleteRoom(at offsets: IndexSet) {
    store.rooms.remove(atOffsets: offsets)
}

func moveRoom(from source: IndexSet, to destination: Int) {
    store.rooms.move(fromOffsets: source, toOffset: destination)
}

Finally, just like before, we'll add another modifier and tell it to call our newly created method:

var body: some View {
    NavigationView {
        List {
            Section {
                Button(action: addRoom) {
                    Text("Add Room")
                }
            }
            Section {
                ForEach (store.rooms) { room in
                    RoomCell(room: room)
                }
                .onDelete(perform: deleteRoom)
                .onMove(perform: moveRoom)
            }
        }
        .navigationBarTitle("Rooms")
        .navigationBarItems(trailing: EditButton())
        .listStyle(GroupedListStyle())
        
    }
}

Now, go back to the live mode, click the Edit button and try to move the items around. Also, you can tap the delete icon the reveal Delete button and remove the item:

Adding more previews

We'll add more previews the same way we already did in the RoomDetail.swift file.

So, let's wrap our ContentView inside Group and add another ContentView:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView(store: RoomStore(rooms: testData))
            
            ContentView(store: RoomStore(rooms: testData))
        }
    }
}

Now, with the second preview, we can change the environment to use much larger size:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView(store: RoomStore(rooms: testData))
            
            ContentView(store: RoomStore(rooms: testData))
                .environment(\.sizeCategory, .extraExtraExtraLarge)
        }
    }
}

That's pretty cool, huh?

Now, let's test how our app would look like with the dark mode. We'll create yet another preview and use the dark color scheme:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView(store: RoomStore(rooms: testData))
            
            ContentView(store: RoomStore(rooms: testData))
                .environment(\.sizeCategory, .extraExtraExtraLarge)
            
            ContentView(store: RoomStore(rooms: testData))
                .environment(\.colorScheme, .dark)
        }
    }
}

And when you test the app in the live mode, everything will work as expected. So, let's add a new Room, check its details, move it to the top and finally delete it.

Perfect! I hope you've learned a lot today.

If you want to support me, please, check my courses on Udemy and Skillshare.

Thank you.

Build a Simple Contact List with SwiftUI

HZ — Fri, 06 Dec 2019 06:50:02 +0000

In WWDC 2019 Apple introduced SwiftUI, which is an innovative and simple way to build user interfaces across all Apple platforms.

SwiftUI is powered by Swift language and allows you to use the same tools and APIs for developing applications for macOS, iOS, iPadOS, tvOS and watchOS.

SwiftUI uses a declarative syntax so you can simply state what your user interface should do. Before the introduction of SwiftUI, developers used imperative UI which was prone to errors because it required developers to track the state of the code. For example two states of Boolean, like on or off.

In order to use SwiftUI with all the features it offers, you need to run macOS X 15 or newer and Xcode 11 or newer. Xcode 11 includes new design tools, drag & drop of controls and previews which allow you to instantly see the changes as you type your code which is a huge time saver.

If you’ve developed for iOS platform before SwiftUI, you are probably familiar with Interface Builder and storyboards.

Even though this helps to visualize the code a lot, they have one huge problem. Interface Builder doesn’t know about the Swift code and vice versa. That’s why it was pretty easy before SwiftUI to delete the action in Interface Builder, and since Interface Builder didn’t care about the code, the code would still compile.

Simply put, Interface Builder and Swift were always totally separate tools, but SwiftUI changes this a big way. As a Swift-only framework, SwiftUI solves many old problems with Swift and Interface Builder.

Here are two of the most important:

you no longer have to worry about calling non-existent functions, because the user interface is checked by the compiler
you no longer have to argue about programmatic or storyboard design, you get both at the same time

I’ve created a rather short class to show you exactly how to use SwiftUI by creating a simple contact list. This app won’t earn you and design award, but it will demonstrate the power and ease of use SwiftUI offers over the old approach.

Here's the link: https://skl.sh/2XInPhG

With SwiftUI, Apple wrote a whole new and pretty exciting chapter to its iOS and macOS development book. I hope you’ll like using SwiftUI as much as I do! 🙂

From WordPress to Ghost in the JAMstack

HZ — Thu, 05 Dec 2019 11:22:11 +0000

TL;DR version:
If you're tech-savvy, just grab this code and you'll figure it out immediately.

The rest of you, just grab this free online tutorial where I explain the whole process step by step: https://skl.sh/2YgFBub

Longer version:
I know that you don't have time for meaningless small-talk so let's get to it. In this straight-to-the-point article, I will show you how to save hundreds of dollars per year by transferring your slow and expensive WordPress-based website to a fast, secure and free static Ghost-based blog.

Instead of paying your hard-earned money for expensive web hosting and some more for premium plugins only to get mediocre performance at best, you'll pay nothing and get the best solution the current technology offers.

I recently switched one of my WordPress website to this modern solution and this is what happened. This is your SEO holy grail and the ticket to the top of Google results because speed is everything and you can't possibly get any better results.

This is also something I was never able to achieve with WordPress, no matter how many hacks I tried, what SEO plugins I bought, how much I optimized images, Javascript and CSS.

Yes, there are some managed hosting services that will take your WordPress to a hundred percent in a speed test, but you will pay a small fortune for it while my solution is a hundred percent free of charge. You won't pay for web hosting, you won't pay for any special plugins, you'll get everything for free including the state of the art cloud-based image storage for your posts.

With my solution, you'll get the best of both worlds money can buy and yet you won't spend a single penny:

A distraction-free state of the art CMS writers simply love for its ease of use
Static, fast and secure blog hosted on Netlify's blazingly fast CDN network

This means that you can finally ditch your slow and expensive WordPress blog that drives you crazy.

To achieve this future-proof professional publishing state, we will turn a regular Ghost CMS into a static blog and serve it from CDN.

Basically, we'll take the best distraction-free editor out there, which is the Koenig editor from Ghost CMS, and teach it how to upload post images directly to Cloudinary.com, your free CDN image repository.

You'll be able to create all your content locally on your machine and once it's ready, we'll transform it with Gatsby to a blazingly fast static website that we'll deploy to the state-of-the-art CDN network provided by Netlify. And yes, your content will be delivered via a secured HTTPS connection, because we want Google to love your site as much as your readers.

This is the basic overview of your future blogging experience:

You will write your blog posts in your local Ghost CMS running in Docker container to keep your main operating system clean and fast.
All the images will be automatically uploaded to Cloudinary CDN for the fast delivery and all sorts of other amazing features.
Once you'll publish your new post, you're ready to take it from your local Ghost to the Internet.
First, you will expose your localhost to the Internet.
Next, you will deploy your blog to Netlify which means that Gatsby static generator sitting in your GitHub account will crunch the code and spit out the static version of your Ghost blog to Netlify's CDN.

I get it, at first, this might be quite intimidating, especially for total beginners who have no idea what's Gatsby or Docker.

That's why I wanted to make the whole process extremely easy (even for total beginners), so I have decided to create a special docker-compose recipe and give you the whole setup package, so you'll be up and running in no time.

Instead of explaining it all in a text form, I created a simple video tutorial which I published on Skillshare where you can get it for free via this link: https://skl.sh/2YgFBub

I hope you'll enjoy this tutorial, ditch your expensive and slow WordPress and make your website a better experience not only for your readers but for Google as well, because speed is everything!

I really want to help you, so if you get stuck, especially on Windows, let me know so I can guide you. I'm sure it's well worth the effort so you'll never ever have to decide which plan is just enough but not too bad...

Docker and Docker Compose for PHP Development with GitHub and Digital Ocean Deployment

HZ — Mon, 25 Nov 2019 17:43:59 +0000

I have always missed some easy to follow tutorials on Docker, so I have decided to create it myself. I hope it will help you understand why Docker is such a popular tool and why more and more developers are choosing Docker over Vagrant and other solutions.

When it comes to PHP development, you have basically three options on how to approach the problem of preparing a development environment for your project. The oldest way is to install individual services on your development machine manually. With different versions of these services on staging and production environments, you can get into dependencies problems rather quickly. Also, it’s quite a challenge to manage different projects with different requirements on a single computer.

You can solve this problem with virtual machines. Download VirtualBox and set up your environment individually for every project so they won’t interfere because they will be totally separated. When you need to deploy your work along with your environment to the remote server, you will just provision the whole virtual machine. Vagrant can help you with this process because it allows you to deploy your project directly. For example to a DigitalOcean Droplet. But the problem is that you are working with the full-blown operating systems even though they are virtualized.

What if there is another way? What if you don’t need full operating system encapsulated in virtual machines to keep your projects separated and yet you would be able to have the same development environment everywhere, on your local machine, on the testing server and even on the production server. Welcome to the world of Docker!

To better understand the difference between Docker and VM-based solution, take a look at the image below:

Docker can help you as a developer in three areas by:

eliminating the “it works on my machine” problem once and for all because it will package dependencies with your apps in the container for portability and predictability during development, testing, and deployment,
allowing you to deploy both microservices and traditional apps anywhere without costly rewrites by isolating apps in containers; this will eliminate conflicts and enhance security,
streamlining collaboration with system operators and getting updates into production faster.

Interested? Great! Let’s give it a try.

I will make you a full-stack web developer in just 12 hours!

Docker Installation

This one is easy, all you need is download a package for your operating system. In my case, I downloaded Docker for Mac. You will install Docker as any other application. Once you see the Docker happily humming in your top bar, you can start building awesomeness with me!

I will use Atom (www.atom.io) editor along with the terminal-plus package. If you want to follow my setup, be aware that you need to tweak the terminal-plus a bit to work. There is some minor issue, but it can be easily fixed like this:

Go to ~/.atom/packages/terminal-plus/package.json and locate the dependencies section.
Remove the commit id (#……) at the end of the pty.js entry: “pty.js”: “git+https://github.com/jeremyramin/pty.js.git**#28f2667**” becomes “pty.js”: “git+https://github.com/jeremyramin/pty.js.git”

Go to terminal and run these commands:

cd ~/.atom/packages/terminal-plus/
npm install
apm rebuild

Restart the Atom editor and terminal-plus should work now! Of course, you can choose your own text editor and terminal client. Everything will work the same.

Create your first Docker image

The easiest way to create a Docker image is with the Dockerfile which is something like a recipe for building an image.

NOTE: Image is something like a blueprint. You can use one blueprint to create many objects like cars or houses. Similarly, you can use one image to create many containers.

Let’s take a look at how easy it is to create a development environment based on PHP 5 and Apache webserver.

Create a new folder on your Desktop and name it docker-apache-php5.

Inside docker-apache-php5 folder, create new folder called src where we will add a new file called phpinfo.php

Create this file and put this code inside:

    <?php  phpinfo(); ?>

This is a very simple php code that will call just one simple function, but this function will output a nice table with a detailed configuration of our development environment we are just creating.

Create another file, this time directly inside docker-apache-php5 folder and call it Dockerfile (just like this, no extension). Inside this file, we will write some directives for Docker.

Your directory structure should look like this now:

We want to build our development environment on PHP 5 and Apache webserver. The best way is to start with the image already available. In the case of PHP, there is probably no better source than the official image.

Docker images are available on Docker Hub. Sign up for a free account and once you are in, you can search for images.

Go ahead and type php in the search box.

Select php official image and let’s take a look at the details:

We want to use 5.6-apache, version which is PHP 5.6 including the Apache webserver. This is convenient because we don’t need to install Apache separately.

Go ahead and click on the link (5.6/apache/Dockerfile) which will get you to GitHub Repository of this image. Just take a look at the Dockerfile.

Don’t panic, our Dockerfile will have just a couple of lines because we will take advantage of the hard work of the PHP team and use their image. This doesn’t mean that you can’t just sit down and write your own image based on Debian Linux, but why would you want to waste your time, when you can just use what’s already done?

In order to use this image, go to your Dockerfile and write this line of code:

    FROM php:5.6-apache

This says that our own image will be based on the 5.6-apache image created and maintained by the PHP team. Sweet.

Type this line below:

    COPY src/ /var/www/html/

Make sure there is a space between src/ and /var. It’s very important! Now, this line says that we want the content of the src folder we have created a few minutes ago, to be copied to /var/www/html/ but you might wonder why and where it is located.

This is the folder structure that will be created while our image will be built or more specifically while we will create a container from that image. I showed you the Dockerfile for 5.6-apache image on purpose. Remember the line FROM debian:jessie?

Our image will be based on a 5.6-apache image, but even this image is based on another image. It this case, it is debian:jessie image. So basically, the PHP team grabbed debian:jessie image and added their own modifications with their Dockerfile, like we are adding our own modifications to 5.6-apache image with our Dockerfile.

The point is that we are all adding layers to the basic debian:jessie image which is a Linux distribution and as you probably know, the Linux file system starts with root (/) followed by specific subfolders. Mac OS is based on UNIX and it works similarly. Your Desktop is actually located in /Users/your-name/Desktop. In my case, it is /Users/zavrelj/Desktop.

Now, for web content, Apache web server uses a directory called html which is stored inside www directory inside var directory. That’s how it is and because we know it, we can say that once our image with Apache web server is initialized or spun up to create a container, we can safely copy the content of our src folder to /var/www/html folder on Debian because it will be there since the Apache web server will create it during its own installation.

Give yourself a pause and let this all sink. It’s a really important concept.

Ok, the last line we will add to our Dockerfile looks like this:

    EXPOSE 80

It says that we want the port 80 to be available for incoming requests.

Your Dockerfile should look like this now:

Once you have this, save the changes, open your favorite terminal app. In the terminal, set your docker-apache-php5 folder as a working directory. I expect you to know how to work with the command line.

If you don’t just open terminal and type

pwd

It will show you your current working directory. If have you followed me step by step so far and you are on Mac computer, this command should get you to the right directory:

     cd ~/Desktop/docker-apache-php5

Copy this code and paste it into the terminal, then hit Enter. To make sure, you are in the right directory, type ls in the terminal and hit Enter. If you see something like this, you’re good to go:

It’s important to be in the right directory, where the Dockerfile is saved. We will now build our image from the Dockerfile.

Type this line in terminal:

     docker build -t php-image .

This command will build our image, -t option lets you give the image a custom name, in our case, it will be php-image because I want you from the very beginning to be able to make a distinction between images and containers. Finally, the dot at the end of this command means that the Dockerfile is located in the current directory. That’s why we wanted to get there!

If everything went right, you should see something similar in your terminal:

Docker has just created an image and assigned it an ID, in my case 576a14c36bc9. To see the list of all your images, just type this command in your terminal:

     docker image ls

As you can see, there are two images, and they are sorted by the date of creation. The first one is our image we have just built, the second one is the image Docker pulled from Docker Hub. As you can see, its name is php and the tag is 5.6-apache, together it makes php:5.6-apache which is exactly what we wrote in the first line of our Dockerfile! Docker needed to pull this image first in order to create our own image. That’s why we have two images even though we have created only one.

Now we need to create a container from our php-image. Our image is just like a snapshot. To be able to actually work with your services like PHP, you need to spin up the container from that image.

Type this in your terminal:

     docker run -p 80:80 -d --name php-container php-image

This will create a container from our php-image.

-p 80:80 is port mapping, remember how we exposed 80 in the Dockerfile? Well, now we need to tell the container to use the exposed port 80 and deliver its content to the port 80 of our localhost,

-d stands for a detached mode which will bring the process to the background so you can still use the same terminal window,

--name allows us to give our container name of choice, otherwise, Docker would pick one for us randomly.

And finally, at the end of this command is the name of the image from which we want to create our container.

Remember that the name must be put only after all options! To make sure that your new container is up and running, type this command in terminal:

    docker ps

You should see this:

You can see the container’s name, the image it was created from, ports, ID and status.

Since our container is waiting for some work, let’s make it do its job! Open your web browser and type localhost/phpinfo.php

You should get this:

It means that everything works and we are running PHP 5.6.30 on our local webserver! Great work!

Adding database

Unfortunately, this container won’t work with a database because all we have is PHP and Apache webserver. To add a database server to our development environment, like MySQL for example, we would have to create a container for a database and connect it to our php-container, thus those two containers or rather services inside those containers could talk to each other.

Let’s take a look at how this can be done. We will start again in Docker Hub and search for mysql:

And sure enough, there is an official repository maintained by MySQL team. Let’s create our own mysql-container by running this code:

     docker run --name mysql-container -e MYSQL_ROOT_PASSWORD=secret -d mysql:latest

When you run this code, Docker will first look for mysql:latest image on your computer. If it’s not available, it will pull it from Docker Hub first and then spin up the container from it. This is very important because Docker is trying to save your disk space. If mysql:latest image is already on your computer, Docker will use it instead of downloading yet another copy.

Remember this, we will come back to this concept later.

Type docker ps again. You should now see two containers and both are running.

This demonstrates, that you can immediately spin up a container from an already existing image. Only if you want to create your own image, you need to actually build it first and run it later to spin up a container from it.

Let’s create some mysql code to see if mysql is working. Since we run PHP 5.6, we can use mysql_connect function. Even though it’s deprecated in PHP 5 and completely removed from PHP 7, for our testing purposes, it will be just fine.

In src directory, create a new file named mysql.php and place this content in it:

     <?php  

     $database = "users";  
     $user = "root";  
     $password = "secret";  
     $host = "mysql";  

     $db = mysql_connect("$host","$user","$password");  

     if (!$db) {  
      echo "Cannot connect to the database server";  
     }elseif ($db && !(mysql_select_db($SQL_DBASE, $db))) {  
      echo "Sucessfully connected to the database server! Database Users selected!";  
     }  

    ?>

This is a very simple php code. It tries to connect to the database server with the credentials we provided. If the connection cannot be established, it will display an error. If the connection is successful and the database users exists, it will display a success message.

Now, try to go to localhost/mysql.php in your web browser. You should get this message:

Our mysql.php file can not be found, even though it is in the same directory as phpinfo.php file and this one can be found just fine.

The problem is that even though we added a new file and thus changed the content of our project, we are still running the old php-container based on the original php-image which has no clue about the changes we have just made.

To fix this, we need to rebuild our php-image and spin up a new container from this updated image. If you think now that this is a lot of hassle, it is, but just for now. You will truly appreciate a feature called volumes I will introduce later, once you go with me through this hell.

Stop the php-container we have created from php-image by running this command:

     docker stop php-container

To list all containers, even those that are not running, use docker ps -a command. You can see that php-container has exited:

Once the container is stopped, we can remove it with this command:

     docker rm php-container

You can remove the container even while it is running, in that case, you need to add -f option to the end of the command above. Once the php-container is removed, you can remove the php-image as well. If you tried to remove php-image while the php-container still existed, Docker would protest.

     docker rmi php-image

Ok, now we can rebuild our php-image again and the only reason for that is to copy our new mysql.php file into /var/www/html folder. Remember the instruction from Dockerfile? Here it is again: COPY src/ /var/www/html/

This is why we did all of this, to get our new mysql.php copied from src folder to /var/www/html folder. There is another, way better solution, though, and we will get to it soon. Let’s build our image again:

     docker build -t php-image .

and spin up the updated container from it:

     docker run -p 80:80 -d --name php-container php-image

Now, navigate to localhost/mysql.php from your web browser. The file apparently exists, but we have another problem:

PHP image is very lightweight, it doesn’t usually include PHP extensions and mysql is one of those missing. That means that PHP doesn’t know about any function called mysql_connect(). To fix this, we need to add mysql extension to our php-image first. But don’t be scared, we won’t undergo the same painful process again.

You can directly rebuild the image and then run the container without the painful process of stopping the container, removing the container and rebuilding the image. But I didn’t tell you sooner because I wanted you to try all these commands so you know how to manage containers and images. I hope you will forgive me this pesky move 🙂

Go to your Dockerfile and add this line at the bottom:

     RUN docker-php-ext-install mysql

This will add mysql extension to our PHP image. Now just run this command in terminal:

     docker build -t php-image .

You can see that in Step 4/4, a mysql extension has been added to our image:

If you list all images with docker image ls, you can see that php-image has been created only a few seconds ago. This means that if you build the image with the same name, the original image is overwritten with the new one.

The same can’t be done with the container, though. If you try and run this command now while the original container is still running…

     docker run -p 80:80 -d --name php-container php-image

…you will get this error message:

You need to stop and remove the currently running php-container first. As I mentioned already, you can do this at the same time by using -f option:

     docker rm php-container -f

Now you can spin up the php-container again, but this time the updated php-image will be used.

     docker run -p 80:80 -d --name php-container php-image

NOTE: You might wonder if you could just spin up a container with a different name and kept the original one running.

You could do that! The problem is that you would have to map a different port as well because port 80 would be still taken by the original php-container, thus unavailable for new mapping.

This could be of course solved by using for example -p 81:80 instead of -p 80:80. Finally, you would have to explicitly type the port to the web browser like this: localhost:81/mysql.php.

Port 80 is the default one, that’s why it doesn’t have to be written explicitly, unlike other ports.

OK, navigate to localhost/mysql.php from your web browser again. Even though we get another warning now, we are getting closer because the new error message comes directly from mysql_connect() function. That means that it exists and PHP knows about it. But it seems like there is a problem with a network address:

The reason for this error is the fact that we have two separate containers. One for PHP (php-container) and one for MySQL (mysql-container). And they don’t know about each other, they don’t talk to each other. Let’s fix this. Stop php-container once again and remove it at the same time:

     docker rm php-container -f

Run this code:

     docker run -p 80:80 -d --name php-container --link mysql-container:mysql php-image

You are already familiar with this code except for the link part. This says that we want to link our php-container with mysql-container. Now, navigate to localhost/mysql.php from your web browser, this time you should see this:

Perfect! Now, in order to be able to modify the content of our src folder without the need to rebuild images all the time, we will add -v option to our docker run command. So for the last time, stop and remove php-container:

     docker rm php-container -f

Run it again with this new option:

     docker run -p 80:80 -d -v ~/Desktop/docker-apache-php5/src/:/var/www/html/ --name php-container --link mysql-container:mysql php-image

This option should be quite familiar. We used something similar in our Dockerfile to tell our image to copy the content of our src folder to the Apache webserver default directory inside the container.

Well, this time, we will create the volume, which means that those two locations will be in sync. Actually, we will mount our folder saved in Desktop to the location inside the container. Once you make any kind of change in src folder, it will be automatically available in /var/www/html folder in Apache webserver.

Let’s test this! Go to your mysql.php file and add “AMAZING!” at the end of the echo like this:

    echo “Successfully connected to the database server! Database Users selected! **AMAZING!**“;

Save the file and refresh the browser! Isn’t that amazing? 🙂

Docker Compose

So far, we did it all manually. We configured and created images, we created containers and link them together. If you work with two or three containers, it is doable, even though we have spent quite some time with this. However, if you need to set up the environment with many more containers, it will become very tedious to go through all those steps manually every time.

Luckily, there is a better way. Docker Compose is a tool for defining and running multi-container Docker applications. It allows you to create a YAML configuration file where you will configure your application’s services, and define all the steps necessary to build images, spin up containers and link them together. Finally, once all this is done, you will just set it all in motion with a single command.

Let’s take a look at how this works. This time, we will create the LEMP stack which will consist of Linux, PHP 7, Ngnix, and MySQL. It is generally recommended to have one process, or microservice per container, so we will separate things here. We will create six containers and orchestrate them with Docker Compose.

As we already did in the previous section, we will again use official images and extend them with our Dockerfiles. First, let’s delete all containers and images, so we can start with a clean slate.

To list all containers:

     docker ps -a

To delete containers:

     docker rm php-container -f  
     docker rm mysql-container -f

To list all images:

     docker image ls

To delete images:

     docker rmi php-image:latest -f  
     docker rmi php:5.6-apache -f  
     docker rmi mysql:latest -f

-f option will force deletion even if the container is running or the image is in use.

If by any chance you won’t be able to delete container or image by its name, use its ID instead. This is actually the only viable alternative if you happen to have an image with no name:

List all containers with:

     docker ps -a

and all images with:

     docker image ls

All clear? Great! Let’s begin! Go to your Desktop and create a new folder called docker-ngnix-php7.

Nginx

Let’s start with a web server. Instead of Apache, we will use Nginx this time. First, we will check if there is any official image on Docker Hub. And sure enough, here it is:

We will choose the tag latest, so I hope you remember, that the name of the image and the tag go together like this: nginx:latest

Now, create a new file in your docker-nginx-php7 directory and save it as docker-compose.yml

Inside, write this:

     nginx:   
      image: nginx:latest  
      container_name: nginx-container  
      ports:   
       - 80:80

This should be somewhat familiar. Remember when we ran mysql image? We used this command in the terminal: docker run -p 80:80 -d --name php-container php-image.

Now, instead of running this command, we will take the options and save them in a configuration file. Then, we will let Docker Compose run commands for us by following the instructions in this file. Save the file. This is what it should look like:

Go to the docker-nginx-php7 directory in your terminal and run this command:

     docker-compose up -d

-d option still means detached, nothing new here.

Docker Compose will pull Nginx image from Docker Hub, create a container and give it a name we specified. Then, it will start the container for us. Docker Compose will do all of these steps automatically.

I gave the container a specific name just for educational purposes here, so we can easily identify it. But it’s not a good practice in general because container names must be unique. If you specify a custom name, you won’t be able to scale that service beyond one container, so it’s probably better to let Docker assign automatically generated names instead. But, in our case, I want you to understand how things are working.

Use the familiar docker ps command to see the list of running containers. Write down the IP address assigned to ngnix-container and navigate to this address with your web browser. You don’t have to write the port number since 80 is a default value.

You should see your Nginx web server running:

That was easy, right?

PHP

Let’s say that we want to add the PHP to the mix and we want it to be automatically downloaded, configured and started. We also want to modify our Nginx web server a bit. You know the drill. If you want to modify the official image and add your own changes, you need to use Dockerfile as we already did in the previous section.

Let’s do this again. First, we will create a new directory inside our docker-ngnix-php7 folder and name it nginx. In this directory, we will save a new Dockerfile. Next, we will create a new index.php file which will be saved in www/html directory inside docker-ngnix-php7 folder with this content:

     <!DOCTYPE html>  
     <head>  
      <title>Hello World!</title>  
     </head>  

     <body>  
      <h1>Hello World!</h1>  
      <p><?php echo 'We are running PHP, version: ' . phpversion(); ?></p>  
     </body>

This simple page will help us test if PHP is running.

NOTE: If you use Atom editor, you can create new file and the whole new directory structure at the same time! Just click with the right mouse button on the name of docker-nginx-php7 folder in left pane in Atom, choose New File and instead of typing just the name of the file, type the whole path www/html/index.php. Atom will create the file for you and both directories as well!

Your folder structure should look like this now:

To configure our Nginx web server, we will use default.conf, so create this file and save it in nginx folder. Now add this content inside default.conf and save it:

     server {  

     listen 80 default_server;  
     root /var/www/html;  
     index index.html index.php;  

     charset utf-8;  

     location / {  
      try_files $uri $uri/ /index.php?$query_string;  
     }  

     location = /favicon.ico { access_log off; log_not_found off; }  
     location = /robots.txt { access_log off; log_not_found off; }  

     access_log off;  
     error_log /var/log/nginx/error.log error;  

     sendfile off;  

     client_max_body_size 100m;  

     location ~ .php$ {  
      fastcgi_split_path_info ^(.+.php)(/.+)$;  
      fastcgi_pass php:9000;  
      fastcgi_index index.php;  
      include fastcgi_params;  
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;  
      fastcgi_intercept_errors off;  
      fastcgi_buffer_size 16k;  
      fastcgi_buffers 4 16k;  
    }  

     location ~ /.ht {  
      deny all;  
     }  
    }

Now back to Dockerfile for Nginx. Write these two lines in it and save the changes:

    FROM nginx:latest   
    COPY ./default.conf /etc/nginx/conf.d/default.conf

This means that we will start with the default nginx image (nginx:latest), but then, we will use our own configuration we have just saved in default.conf and copy it to the location of the original configuration. Now we need to tell Docker to use our own Dockerfile instead of downloading the original image and since Dockerfile is inside the nginx directory, we need to point to that directory. So instead of using image: nginx:latest, we will use build: ./nginx/

We will also create volumes so the Nginx web server and PHP as well can see the content of our www/html/ directory we have created earlier, namely our index.php file which sits inside. This content will be in sync with the container’s directory /var/www/html/ and what’s more important, it will be persistent even when we decide to destroy containers.

Next, we will create a new php-container using original PHP image, this time PHP 7 FPM version. We need to expose port 9000 we set in default.conf file because the original image doesn’t expose it by default. And finally, we need to link our nginx-container to php-container. After implementing all those changes, our modified docker-compose.yml will look like this:

     nginx:    
       build: ./nginx/  
       container_name: nginx-container  
       ports:  
         - 80:80  
       links:  
         - php  
       volumes:  
         - ./www/html/:/var/www/html/  

    php:    
      image: php:7.0-fpm  
      container_name: php-container  
      expose:  
        - 9000  
      volumes:  
        - ./www/html/:/var/www/html/

NOTE: You might wonder what is the difference between ports and expose. Exposed ports are accessible only by the container to which they were exposed, in our case php-container will expose port 9000 only to the linked container which happens to be nginx-container. Ports defined just as ports are accessible by the host machine, so in my case, it would be my MacBook or rather the web browser I will use to access those ports.

Even though our nginx-container is still running, we can run this command:

     docker-compose up -d

This time, Docker will pull php:7.0-fpm image from Docker Hub and create a new image based on the instructions in our Dockerfile.

As you can see, Docker is warning us that it built the image for nginx service only because it didn’t exist. This means that if this image already existed, Docker wouldn’t build it and it would use the existing image instead. This is very important because even though you will change Dockerfile in the future, Docker will ignore those changes unless you specifically say that you want to rebuild the existing image by using the command docker-compose build.

Go ahead and take a look at the list of all images:

     docker image ls

You should see the official nginx image, official php image that has just been pulled and finally, our modified version of the official nginx image which name is dockernginxphp7_nginx. This name is based on the name of the directory where our docker-compose.yml file is saved. The last part of its name comes from the name of the image from which our image is derived, in our case _nginx.

docker ps will show you two containers running:

NOTE: If your nginx-container is not running, use docker logs nginx-container command to see what is the problem. Very probably, it will be some kind of typo in default.conf file.

Even though we didn’t stop the original nginx-container based on the official nginx image, it’s not only stopped, it’s completely gone. Instead, we have our new modified nginx-container running, but this one is spun up from dockernginxphp7_nginx image. If you go back to your web browser and refresh the page, you should see this:

Let’s see if the mounted directory works as expected. Go to your index.php file and write AMAZING! inside the h1 tag like this:

When you refresh the page, AMAZING! will appear:

One last thing before we move to the database. As you might have noticed, we have mounted the same directory www/html/ to both our containers, nginx-container and php-container. While this is perfectly legit, it is a common practice to have a special data container for this purpose. Data container holds data and all other containers are connected or linked to it.

In order to set this up, we need to change our docker-compose.yml file once again:

     nginx:    
      build: ./nginx/  
      container_name: nginx-container  
      ports:  
       - 80:80  
      links:  
       - php  
      volumes_from:  
       - app-data  

     php:    
      image: php:7.0-fpm  
      container_name: php-container  
      expose:  
       - 9000  
      volumes_from:  
       - app-data  

     app-data:    
      image: php:7.0-fpm  
      container_name: app-data-container  
      volumes:  
       - ./www/html/:/var/www/html/  
      command: “true”

As you can see, we added a new container, app-data-container, which uses the parameters of the same volumes we used for php-container and nginx-container so far. This data container will hold the application code, so it doesn’t need to run. It only needs to exist to be accessible, but since it won’t serve any other purpose, there is no need to keep it running and thus wasting resources.

We use the same official image we already have pulled previously. Again, this is to save some disk space. We don’t need to pull any new image for this purpose, the php image will work just fine. Also, we told Docker to mount volumes from app-data for nginx-container and php-container, so we won’t need volumes options for those anymore and we can delete it.

Finally, we say that both nginx-container and php-container will use volumes from app-data-container. Run docker-compose up -d once again. As you can see in the terminal, Docker has just created a new app-data-container and re-created php-container and nginx-container.

Now, let’s see the list of containers, but this time, let’s display all containers, not just the those that are running:

     docker ps -a

As you can see, the app-data-container has been created but it’s not running because there is no reason for it to run. It only holds data. And it has been created from the same image as php-container, so we saved hundreds of megabytes we would otherwise need if we pulled data-only container.

MySQL

We need to modify our php image because we need to install the extension that will allow php to connect to mysql. To do so, we will create a new folder named php and inside we will create a new Dockerfile with this content:

    FROM php:7.0-fpm  
    RUN docker-php-ext-install pdo_mysql

Your folder structure should look like this now:

Next, we need to change our docker-compose.yml file again. We will change the way the php-container is built, next we will add mysql-container and mysql-data-container and finally, we will link php-container to mysql-container.

We will also define some environment variables for mysql-container. MYSQL_ROOT_PASSWORD and MYSQL_DATABASE variables will be applied only if a volume doesn’t contain any data. Otherwise, these will be ignored. It makes sense because otherwise, we would create a new database with the same name and root password each time we would spin up a container, thus overwriting our database content. Not the behavior we want. I will name my database zavrel_db but go ahead and change the name if you feel like it!

As with app-data-container, mysql-data-container will just hold the data, this time not our application code, though, but database data like tables with rows and their content. Since we won’t access this data directly, we don’t really care where they will be located on our host machine, so we don’t need to mount them to our directory structure.

     nginx:    
      build: ./nginx/  
      container_name: nginx-container  
      ports:  
       - 80:80  
      links:  
       - php  
      volumes_from:  
       - app-data  

     php:    
      build: ./php/  
      container_name: php-container  
      expose:  
       - 9000  
      links:  
       - mysql  
      volumes_from:  
       - app-data  

     app-data:    
      image: php:7.0-fpm  
      container_name: app-data-container  
      volumes:  
       - ./www/html/:/var/www/html/  
      command: “true”  

     mysql:    
      image: mysql:latest  
      container_name: mysql-container  
      volumes_from:  
       - mysql-data  
      environment:  
       MYSQL_ROOT_PASSWORD: secret  
       MYSQL_DATABASE: zavrel_db  
       MYSQL_USER: user  
       MYSQL_PASSWORD: password  

     mysql-data:    
      image: mysql:latest  
      container_name: mysql-data-container  
      volumes:  
       - /var/lib/mysql  
      command: "true"

To test our MySQL setup, we will modify our index.php as well, so we can try to access our database:

     <!DOCTYPE html>  
     <head>  
      <title>Hello World!</title>  
     </head>  

     <body>  
      <h1>Hello World!</h1>  
      <p><?php echo 'We are running PHP, version: ' . phpversion(); ?></p>  
      <?  
       $database ="zavrel_db";  
       $user = "user";  
       $password = "password";  
       $host = "mysql";  

       $connection = new PDO("mysql:host={$host};dbname={$database};charset=utf8", $user, $password);  
       $query = $connection->query("SELECT TABLE_NAME FROM information_schema.TABLES WHERE TABLE_TYPE='BASE TABLE'");  
       $tables = $query->fetchAll(PDO::FETCH_COLUMN);  

       if (empty($tables)) {  
        echo "<p>There are no tables in database "{$database}".</p>";  
       } else {  
        echo "<p>Database "{$database}" has the following tables:</p>";  
        echo "<ul>";  
        foreach ($tables as $table) {  
         echo "<li>{$table}</li>";  
        }  
        echo "</ul>";  
       }  
      ?>  
    </body>

This new script will take values we defined for the database, user, and password (notice that these are the same as environment values we set for our mysql-container) and try to establish the database connection. Once the connection is established, the script will try to select all tables from INFORMATION_SCHEMA where table type is BASE TABLE. Now, if you’re not familiar with MySQL, this might be a bit confusing for you.

NOTE: Basically, every MySQL instance has a special database that stores information about all the other databases that the MySQL server maintains. This special database is called INFORMATION_SCHEMA. INFORMATION_SCHEMA database contains several read-only tables. They are actually views, not databases. Databases are of BASE TABLE type.

So when we try to select the table of type BASE TABLE we are actually looking for a database only and it is the database we will yet have to create. If it’s too much for you, don’t worry, it will all make sense soon.

Anyway, once you have Dockerfile and index.php updated, run docker-compose up -d again. Docker will pull mysql image, next, it will download and install a php extension for connection to the database.

Finally, it will start app-data-container, create mysql-data-container and mysql-container and recreate php-container and nginx-container.

Check with docker ps -a that you have five containers now, 2 of them exited (mysql-data-container and app-data-container).

Refresh index.php in your web browser. You should see this line at the bottom: There are no tables in the database “zavrel_db”.

Which is perfectly fine because we haven’t created any tables in our database yet. However, there are already some tables, but those are not visible by a regular user. If you want to see them, change $user to “root” and $password to “secret” in index.php. This way, you will get access to everything!

Refresh the browser once more:

What a list! Right? Ok, let’s put back our regular user who can see only what he should see:

Deep down the rabbit hole

So far, containers were like black boxes for us. We ran them, we listed them, but we never saw what is inside. That’s about to change now. I will show you how you can get right inside mysql-container and work with mysql server from within.

Run this command from your terminal:

     docker exec -it mysql-container /bin/bash

Now you are inside the container! You can tell by the new prompt in your terminal:

It consists now of root@ followed by the ID of the mysql-container. In my case, it’s root@8a56e15cdd4d, in your case the ID would be different, but it is the same ID your mysql-container has assigned. Want to check? List all running containers by docker ps and look for the CONTAINER ID in the list, it’s the first column.

You can now take a look around as you would in any other Linux system:

ls command will show you the list of files and directories,
pwd command will print the current directory, which is root directory (/),
uname -or command will show you the kernel release and that this is actually a Linux operating system.

Remember, how we defined the volume for mysql-container in docker-compose.yml file?

     volumes:   
      - /var/lib/mysql

Let’s take a look at this directory:

     cd /var/lib/mysql

ls command will show you its content:

All right, let’s end this quick trip by going back to the root directory:

     cd /

Now, we will run mysql command-line interface (MySQL CLI) inside our mysql-container that will allow us to work with the database server.

NOTE: I want you to stop now for a while to let this sink and appreciate. You are working on your physical computer. This computer is running an operating system, Windows or Mac (if you’re on Linux, it’s a bit different). Inside your operating system, you are running a Docker container which is basically a Linux machine.

Now, we will go even deeper and run another command-line interface to work with the database server. Can you see how we go deeper and deeper, layer after layer, down the rabbit hole? 🙂

Ok, let’s go back to work! To get access to MySQL CLI, we need a username and password. Luckily for us, we already created both user and password when we set up environment variables for our mysql-container in docker-compose.yml file. I hope you noticed that we also set up the root password as an environment variable. Remember this line?

     MYSQL_ROOT_PASSWORD: secret

You might ask, how do we know that there is a user named root. Well, there is always this user. That’s why we were able to set the password for him with MYSQL_ROOT_PASSWORD variable without even questioning his existence.

To sign in mysql server, though, we won’t use root access because that would give us too many results as root can see everything.

-uuser means user is “user”

-ppassword means password is “password”

Run the command and you will be taken deeper, inside the world mysql server. Again, you can tell by the prompt which changed now from root@8a56e15cdd4d (different ID in your case) to mysql> that we are somewhere else.

Inside mysql, there are different rules and different commands. Start with the command show databases; Don’t forget the semicolon! I told you, there are different rules in this world.

You will see the nice table with the list of all databases available. One of them is our own database with zavrel_db. Remember when we created it? Again, we defined it while preparing our mysql-container in docker-compose.yml file: MYSQL_DATABASE: zavrel_db

Let’s create a new table in our database. First, we need to select it, so mysql knows which database we want to work with:

     use zavrel_db

You will get the information that the database has been changed. Now, we can create a new table:

     CREATE TABLE users (id int);

Go to your web browser and refresh the page, you will see this table in the list:

Ok. We are done here, let’s get all the way back to the familiar terminal of our computer. First, we need to leave MySQL CLI. This can be done by command q

Go ahead and run it! MySQL will say Bye and you are back inside your mysql-container. Again, you can tell by the prompt root@8a56e15cdd4d. Let’s go one layer up. To leave mysql-container, just use the shortcut CTRL + D or type exit and hit enter. See? We are finally back to our computer terminal! How was it? Did you like the trip? I hope you did!

I wanted to show you this rather complicated way of working with databases and tables so you can truly appreciate the web client we will learn about in a minute, but first, I want to go back to volumes once again, because we need to address few more things about them.

Inspecting containers

Remember how I told you that we don’t really care about where Docker stores volumes of mysql-data-container on our computer (host machine) because we won’t access them directly anyway? Well, if you are curious where they are nevertheless, there is a way how to find out.

Run this command:

     docker inspect mysql-data-container

Look for the Mounts section in the output you will get. Next to Source attribute is the location of database data on our host machine. It should be something like /var/lib/docker/volumes/ and so on provided you are on Mac.

Dangling volumes

When you create a container with mounted volumes and later destroy the container, mounted volumes won’t be destroyed with it unless you specifically say you want to destroy them as well. Such orphan volumes are called dangling volumes.

So far we used a command docker rm container-name -f to remove containers, but if you want to destroy volumes as well, you need to add another option, -v. So it will look like this: docker rm -v container-name -f.

But what about containers we already destroyed so far without destroying their volumes as well? Let’s check out if there are any such volumes. First, let’s list all the volumes we have created so far:

     docker volume ls

Now let’s narrow our list by adding the filter for dangling volumes only:

     docker volume ls -qf dangling=true

-q stand for quiet which only displays volume names

-f stands for filter

It seems like we have some:

To delete them, we will combine two commands here:

     docker volume rm $(docker volume ls -qf dangling=true)

This will remove all dangling volumes for us. Since Docker 1.13 you can use an easier command instead:

     docker volume prune

This will remove all volumes not used by at least one container. Now if you check volumes again, you should have only one volume left:

     docker volume ls

We reclaimed almost 500 MB of space!

phpMyAdmin

Ok, let’s move on and spin up our last container. phpMyAdmin is a great tool for managing mysql databases directly from the web browser. No one will force you to stop your trips deep inside MySQL CLI if that’s what you like, but a web interface is way more convenient in my opinion. Add the following lines at the end of your docker-compose.yml file:

     phpmyadmin:    
      image: phpmyadmin/phpmyadmin  
      container_name: phpmyadmin-container  
      ports:  
       - 8080:80  
      links:  
       - mysql  
      environment:  
       PMA_HOST: mysql

By now, everything should be fairly clear. We start with the official docker image, publish container’s port 80 to port 8080 of our host machine, so we can access phpMyAdmin from the web browser. We need to use a different port, though, because port 80 is already taken by the Nginx web server. Finally, we will link this container to our mysql-container and set an environment variable.

Go ahead and run this command once again:

     docker-compose up -d

Docker will pull the phpMyAdmin image and create phpmyadmin-container.

Go to your web browser and type :8080 behind the IP address your Nginx is working on. In my case, it looks like this 0.0.0.0:8080, but localhost:8080 works as well.

You should be presented with this login screen:

Now, log in as a regular user (user/password). You’re in mysql server! Check the list of databases on the left pane and click on zavrel_db. Can you see the table users we have recently created inside MySQL CLI?

Give yourself a little break, maybe a cup of coffee, and let it all digest a bit. We will continue with more exciting stuff. But since now you have learned a lot! Pat yourself on your back for this!

GitHub Volume

Mounting a local directory to make it accessible for nginx-container and php-container is fine until you want to deploy your application to some remote VPS (virtual private server). In such a case, it would be great to have your code copied to a remote volume automatically. In this section, I will show you how to use GitHub for this.

Let’s make a copy of our docker-compose.yml file and save it as docker-compose-github.yml. We will make some changes to our app-data-container so it won’t mount a local directory but rather get a repository from GitHub. In case you have your code on GitHub in a public repository, this will make it very easy to spin up your development environment on a remote server with the code cloned from your repository.

First, we need to create a Dockerfile for app-data image. Create a new folder called app-data and save the Dockerfile there with this content:

    FROM php:7.0-fpm    
    RUN apt-get update && apt-get install -y git    
    RUN git clone [https://github.com/zavrelj/docker-tutorial/](https://github.com/zavrelj/docker-tutorial/) /var/www/html/    
    VOLUME ["/var/www/html/"]

Your folder structure should look like this now:

Again, we are using already pulled official php image, but on top of that, we will update the underlying debian:jessie Linux distro and then install git. Next, we will clone my public repository I have created for this purpose and save it inside /var/www/html directory inside our container. Finally, we will create a volume from this directory, so other containers, namely nginx-container and php-container can access it.

Now, we need to change app-data image instructions in our docker-compose-github.yml file like this:

     app-data:    
      build: ./app-data/  
      container_name: app-data-container  
      command: “true”

Ok, let’s clean up everything, so we can start with a clean slate.

Stop all containers created with a docker-compose command:

     docker-compose stop

Remove all those stopped containers including volumes that were attached to them:

     docker-compose rm -v

Clean dangling volumes:

     docker volume prune

In order to use our new docker-compose-github.yml file, we need to tell docker-compose about it, otherwise, it would use the default docker-compose.yml as always.

Rebuild the images with the new configuration file:

     docker-compose -f docker-compose-github.yml build

and spin up containers again:

     docker-compose -f docker-compose-github.yml up -d

Navigate to your page in the web browser and you should see this:

Digital Ocean

Let’s provision our development environment to a remote server. Digital Ocean is a great service. If you don’t have an account yet, sign up with my referral link and you will get $10 in credit!

Once you’re in, create a new Droplet:

and choose Docker from One-click apps:

Pick the smallest size available, it’s more than enough for our purposes:

Since I want you to use SSH for the remote access to your Droplet, you need to set it up, unless you already have it. The whole process is quite easy. Open new terminal window and type:

     ssh-keygen -t rsa

When you’re asked where to save the key, just hit Enter.

If some other key is already there, it will be overwritten.

Enter the password for the newly generated key (twice).

Once you see this, your key is ready:

Run this command to display the public key, select it and use CMD + C shortcut to copy it to the clipboard:

     cat ~/.ssh/id_rsa.pub

Go back to Droplet setup and hit New SSH Key button:

Paste your copied public key to the from and fill the name of your computer:

Make sure, your computer is selected for SSH access and choose a hostname. Finally, hit that green button Create.

Once your Droplet is created, write down its IP address.

Transferring the project folder

If you have followed me step by step, you should have your docker-nginx-php7 folder on your Desktop.

We will copy this folder to our Droplet so we can run Docker Compose with our YML configuration file remotely from the Droplet.

To copy the folder, we will use rsync command. Make sure you write this down exactly as it is. Instead of IP, use the actual IP address of your Droplet. We want to transfer the actual directory, not just the content inside it, so we need to omit the trailing slash:

     rsync -r -e ssh ~/Desktop/docker-nginx-php7 root@IP:~/

This command will ask for your SSH key password and then create a copy of docker-nginx-php7 folder inside the home folder of the user root (/root).

Now, let’s check if everything has been transferred. SSH into your remote server (your actual IP address instead of IP):

     ssh root@IP 
     cd docker-nginx-php7 
     ls

Can you see your familiar directory structure including two configuration files?

Nice! Everything seems to be in place!

There’s no Docker Compose on this particular Droplet, but it’s fairly easy to install it. First, we need to install python-pip:

     apt-get update 
     apt-get -y install python-pip

Next, we can install Docker Compose via pip:

     pip install docker-compose

We are ready now to let Docker Compose do its magic. Let’s run our familiar command that will automate the whole process of pulling and building images, getting the code from GitHub and spinning up all containers. Since there are no images to rebuild, we can use the up command directly:

     docker-compose -f docker-compose-github.yml up -d

Once everything is done and all containers are running, you can navigate to IP address of your Droplet (http://104.236.209.37/ in my case). Octocat should be waiting for you:

And if you add port 8080 behind the IP address, you will get phpMyAdmin welcome screen:

Go ahead and login with user / password or root / secret, both will work. Make sure that our zavrel_db database is there:

One last thing. Once you’re done with Digital Ocean, make sure to destroy your running Droplet so you won’t be billed. Or in case you used my referral link and received those $10 in credit, to not waste it all by running the Droplet you don’t need after you finish this tutorial.

Alright! That’s all. I hope you have learned something useful today. If you liked this article, consider by complete web development course where I will show you how to use Docker in the development process of the whole discussion server based on PHP and MySQL. Learn more at www.twdc.online.

Want to learn more?

Don't Be Afraid of Regular Expressions

HZ — Mon, 25 Nov 2019 17:04:30 +0000

Regular expressions are very powerful and intimidating at the same time. Let's see why there's no reason to fear them!

I know, I know. How on Earth can you not be afraid if something like this haunts you in your dreams:

^[\w]{1,}[\w.+-]{0,}@[a-zA-Z0–9]{1,}[\w-]{1,}([.][a-zA-Z]{2,}|[.][a-zA-Z0–9]{1,}[\w-]{1,}[.][a-zA-Z]{2,})$

Actually, it's pretty easy to use and modify regular expressions. All you need is to take time to understand the structure. I see a lot of people asking for the right pattern for this and for that instead of investing in themselves and learning the rules behind regex.

In this article, I would like to help you, so you no longer need to spend hours on StackOverflow looking for the right pattern which will finally work.

I can guarantee that once you read this short article, you will understand the pattern I frightened you with at the beginning. But on top of that, you'll be able to modify it to fit your needs!

I will make you a full-stack web developer in just 12 hours!

E-mail

In case you didn't recognize it, the pattern above is for matching an e-mail address. Let's take a look at how to construct it step by step.

We want to make sure that the e-mail address always starts with a word character. A word character is any English letter, digit or underscore. We use the ^ sign to define the position at the start of the string. We use the [] to define the list of individual characters like [abcde] or the range if we use the - sign like [a-e]. We can use the [a-zA-Z0–9_] pattern, to include all lowercase and uppercase letters, all ten digits and the underscore, but there's a shortcut which will give us the same result:

^[\w]

Next, we want to make sure that there is at least one such character:

^[\w]{1,}

Next, we want to allow any word character or three special characters .+- in the name. Because we should allow jan.zavrel, jan-zavrel and even jan+zavrel. This way, we can be sure that the e-mail won’t start with the dot, plus or hyphen, but can contain these special characters on other than the first position:

^[\w]{1,}[\w.+-]

And of course, there doesn’t have to be any such character because e-mail address can have only one word character in front of the @ character. In other words, we should allow it, but not force it:

^[\w]{1,}[\w.+-]{0,}

Next, we need to always include the @ character which is mandatory, but there can be only one in the whole e-mail address:

^[\w]{1,}[\w.+-]{0,}@

Right behind the @ character, we want to have a domain name. Here, we can define how many characters we want as a minimum and from which range of characters. I would go for all word characters including the hyphen [\w-] and I want at least two of them {2,}. If you want to allow domains like t.co, you would have to allow one character from this range {1,}:

^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}

But this would allow even domain names like -_-.net, right? Yes, it would. And that's something we need to fix. Do you remember how we limited what can be at the very beginning of the e-mail address? Well, we can use a similar approach here as well.

So we want just a word character right behind the @ character, but no hyphens, and no underscores. Unfortunately, there's no shortcut for this, so we need to specify it by three ranges [a-zA-Z0–9] and we need at least one such character right behind the @ character {1,}:

^[\w]{1,}[\w.+-]{0,}@[a-zA-Z0–9]{1,}[\w-]{2,}

But now we set that there must be at least three characters for the domain name. To return to just two, we need to fix it like this:

^[\w]{1,}[\w.+-]{0,}@[a-zA-Z0–9]{1,}[\w-]{1,}

Next, we need to deal with two cases. Either there’s just the domain name followed by the domain extension, or there’s subdomain name followed by the domain name followed by the extension. For example, abc.com versus abc.co.uk. To make this work, we need to use the (a|b) token where a stands for the first case, b stands for the second case and | stands for logical OR. In the first case, we will deal with just the domain extension, but since it will always be there no matter the case, we can safely add it to both cases. Domain extension always starts with the dot [.], followed by letters and we will limit the number of letters to at least two {2}. So we need to add this pattern [.][a-zA-Z]{2,} for both cases:

^[\w]{1,}[\w.+-]{0,}@[a-zA-Z0–9]{1,}[\w-]{1,}([.][a-zA-Z]{2,}|[.][a-zA-Z]{2,})

Now, for the second case, we will add the domain name in front of the domain extension, thus making the original domain name a subdomain. The domain name can consist of letters including the hyphen and again, we want at least two characters here, but no hyphen or underscore should be at the beginning of the domain name:

^[\w]{1,}[\w.+-]{0,}@[a-zA-Z0–9]{1,}[\w-]{1,}([.][a-zA-Z]{2,}|[.][a-zA-Z0–9]{1,}[\w-]{1,}[.][a-zA-Z]{2,})

Finally, we need to mark the end of the whole pattern:

^[\w]{1,}[\w.+-]{0,}@[a-zA-Z0–9]{1,}[\w-]{1,}([.][a-zA-Z]{2,}|[.][a-zA-Z0–9]{1,}[\w-]{1,}[.][a-zA-Z]{2,})$

Go here and test if your e-mail matches the pattern: https://regex101.com/r/cUuG4K/1

Now, I'm pretty sure if you try hard enough, you will find a perfectly legit e-mail address that won't match this pattern, but that's not the point. The point is that you can alter this basic structure to pinpoint exactly the pattern you need. The power is in your hands.

Password

Ok, let's try something that will be a piece of cake for you now. Let's say we need to create a pattern for password with these requirements:

length must be between 8 and 16 characters
must include at least one uppercase and one lowercase letter
must include one number and one special character (@, *, $ or #)

We will start with a simple dot . which matches any single character:

Next, we will set the range of characters between 8 and 16:

.{8,16}

Next, we will add the so called positive lookahead (?=.*[a-z]) in front of our pattern. This checks if at least one lower case letter exists.

(?=.*[a-z]).{8,16}

Next, we need to add uppercase letter in a similar fashion. Again, we will use the positive lookahead, but this time it will look like this (?=.*[A-Z]). Add this pattern right behind the first lookahead:

(?=.[a-z])(?=.[A-Z])**.{8,16}

Next is at least one number. For the range of digits we can use either [0–9] pattern or \d shortcut. We will use the shortcut since it’s shorter (obviously :-) thus making the whole expression more readable. The whole lookahead will look like this (?=.*\d). So again, add this pattern right behind the last lookahead:

(?=.[a-z])(?=.[A-Z])(?=.*\d).{8,16}

Finally, we need to make sure that there is at least one special character from defined group (@, *, $, #). So the last lookahead will choose from these specific characters like this (?=.*[@*$#]). Again, add it behind the last lookahead:

(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[@$#])*.{8,16}

That's it! Here's the pattern: https://regex101.com/r/xquX9X/3

So, what do you think? Not that scary, right? :-)