Restful Routing with Practical Examples | Ahmed Magdy | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Restful Routing with Practical Examples

teacher avatar Ahmed Magdy, Advanced Full Stack Web Developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

10 Lessons (1h 10m)
    • 1. Course Introduction

    • 2. Restful Routing Explained

    • 3. Introduction to Bootstrap

    • 4. Project Tips

    • 5. Boilerplate Setup

    • 6. Duck Duck Go Info Finder

    • 7. Movie Finder using OMDb API

    • 8. To Do Application using MockAPI

    • 9. Improvements and Suggestions

    • 10. Summary

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Understand Restful Routing concept, work on real practical examples and discover online REST APIs.

Meet Your Teacher

Teacher Profile Image

Ahmed Magdy

Advanced Full Stack Web Developer


I am Ahmed Magdy, Advanced Full Stack Web Developer with 10+ years of experience in Full Stack Web Development.

With a BSc degree in Computer Science, I have a full understanding of the full life cycle of a software development project. I also have experience in learning and excelling at new technologies as needed.

The key strengths that I possess for success in this career include: 

I have successfully designed, developed, and supported live use applications, I strive for continued excellence.

Thank you for taking the time to check out my profile!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Course Introduction: Hello guys. This course is about LR for routing. Let me introduce myself. I'm, I heard Monday at onset for the Stack Web Developer was more than ten years of experience in development. In this video, I will make a quick introduction by showing you the outline of the course. Course introduction is what we are doing now. What confinement setup put our work. What is listed for routing, HTTP protocol terms. Why is this important rewarded example, a task management system using this API. Let it Bleed setup, which is the base for our projects. Dr. go in for Finder application we will make in our course. And as a project which is a movie finder using the DBAPI. And at last we will make our to-do application using mock API. Then we will make a quick call somebody and say, This is the info find that project using a ductile call, this API, you will start to fall any thing you want. Then you will click on Search and results will appear in this container. Like this. The next project will be more refined. Music or MDB ABI, which stands for the open movie that you will search for a movie title. And then the movies that matches your search will appear like this. There must be a Todo application using more realistic to show you how you can make cannot operations using realistic VR. You can add assembled to do. You can get that to-do list. You can move at ODU for all discussed. 2. Restful Routing Explained: Hello guys. In this video, I will make quick tutorial about list of a rotting. In this course, you will understand the rest of hierarchy and concept and we will work on a reward the Columbus and discover online just ABRs. What is rested for routing. The goal is to have a very simple explanation for what rest is, and more importantly, how you can use it as the rest stands for Representational State Transfer. The concept of rest was originally created by computer scientists called row filled with this and architecture style for designing networked applications, which leads to people to code. Let's start with talking about the communication systems rescues HTTP protocol, which stands for Hypertext Transfer Protocol. Http protocol is what you use when you navigate on the Internet. Overlook sides, buy things online and submit form, which is the B protocol, it's status, which means that when you navigate from one page to another, HTTP doesn't retain any information between these pitches. This means that developers need to write some code to let applications know how to act. List is anemic structure that covers the three actions that users and applications need to rest terms that's most losing one by one and give a real-world example of how the audio, I am going to use. The example of using Facebook to illustrate what each term does. Post, create a new Facebook post. It read the single post or multiple posts. Did a Facebook post is a modified post replaces original one, pitch editing or Facebook posts, which means supply certain data to modify and delete when you delete a specific post or Facebook. If you think about each of these terms, you can decide to every action that you are an API takes on. Why this is important is towards created to bring a level of standardization to development by using RESTful routes, you can be familiar with how the data would flow through an application. For a reward example, the task management system below uses a rest API. The figure below shows the rest API which is used in a task management system. These are the RESTful routes towards the task management system. Could eat and you dusk use MRD post and the pulse will be slashed tasks when you delete an existing task. So missile do delete and the boss will be slash tasks, slash ID of 0. When you get a specific task, you will lose muscle and the bus will be slash tasks, the ID of tasks to get searching for tasks, you will use missile good, and you will use your boss slash tasks when you are updating an existing task, you will use PUT method and you would use the past slash tasks slash ID. Notice that features like get that specific task or recession was the silver is looking out for the information in the database and show it to the user. Carried a new task is a different action, which is opposed to request that actually creates a new task in the database. Update Athos is a different action or because you are using a PUT request which updates and existing task. And finally, delete dusk is a different action also would do is delete request, is it removes a specific task norms and Thursdays. 3. Introduction to Bootstrap: What is the most important front end to open source toolkit, which is used to build fast and responsive websites. Bootstrap is based on CSS and JavaScript. Bootstrap provides built-in components that you can easily use to build a fully responsive website. Bootstrap has a grid system, which means if the events on container, which consists of rows and columns, I have created and Bootstrap reference document, which will be a guide for us. Let's open this. What's type reference is a complete reference for Bootstrap components and clauses that are commonly used in websites and that we will use in our site project. Response emitted take. These should be added to your head section to create a small tube site. Meta name equals viewport. Content to equal widths equal device words initiate a squared equal 1. Bootstrap grid system. Bootstrap grid system uses a series of containers, rows and columns. Number of columns to use is 12. Bedroom. As it's a figure. There are only four. 4. Project Tips: Hello guys. This video include tips for our projects. In our projects, our target mainly will be getting response results from rest API by providing the parameters required in our GET requests. In the last project only. We will additionally need also to boast some data to EBI and delete data using API. So I didn't figure we are making a request to the rest API and getting a response from the list. If we will use JavaScript and jQuery, we will have two options of pulling our rest API using JavaScript Fetch API or using jQuery ethics core. And you can see the difference between 7 and JavaScript will interact with at home. Document Object Model. Release document.getElementByID element will use document that could eat element to create an element when we lose a child to add an element to another. As a reason for using JavaScript and jQuery. I want you to know everything that happens from inside in the simplest way. When you choose a framework glitter. You know what this framework actually did for you. Okay, That's our brush tips. Let us get started. 5. Boilerplate Setup: In this video is about footsteps template. You can use Bootstrap, bootstrap website template to our index to need jQuery, jQuery CDN. Okay, That's our boy doublet. See this. Okay, it's working fine. 6. Duck Duck Go Info Finder: Today we will talk about API, API slash EBI, Xavier API. To show you the response. Q stands for, I'm pretty equivalent. How you would create a new folder called the ductus. Our index.html. Inside our new folder, let us modify our index.html. And everything would be delta. We will add a container, div class container. And inside this container. And inside this rule, which is that this according to bootstrap grid system. I think inside this div and inside it at if four columns wide. And inside this div, affordably one was deliberate, was ID and name. And onClick function equals 2 and plus 9 using add another row with ID search results to this devices. Let us add four to that click event, which submits the full. Using jQuery. We will get to the users using document.getElementById, the Id. And plus it takes decision, which is ID for our textbooks. Would value to get the value inside these textbooks and include it ends. It will be good. And data type is Jason be equal to false. This function on this. Then using console.log is the success function. Results will be accessed through two related topics. As defined in the JSON response. We will add a for loop and iterate on. It does create a variable. And using document.getElementById we are using is not undefined. And assign, which will hold. We will jQuery and hidden cool. To see how it looks on other devices. 7. Movie Finder using OMDb API: You will find that using IMDB API. You would create a new folder called movie finder. It does copy our index.html inside our new folder called index.html. It would be all MDB movies. I'm dating would be movies HIS. Let us know MDB. Mdb As you see, this is a BI usage using this URL. And these are the examples parameters. We will need to get an API key using this for you will enter your first name and last name and description. Is any receive, any medulla, which contains API key. And see if our API key in Afghanistan value put it inside somebody. We would add a container, the container. And inside this container, div class row. And inside this row I did it for columns wide. This is according to bootstrap the system. And that's going to be our heading inside this div. And create our fish for former class. And inside the div, which is for flight. And inside this div with the label takes to be affordable. Movie title, slide. And inside it our special bottom. Bottom cannot function equals to Movie Talk line using head shot through with ID to display our results. It does see how it would look like. This, which stands for a movie title too. We have been looking for E parameter, which just stands for the click event. That event the default behavior of click event of Mr. Ford. Inside the function. We reduce which are functions is time. And this would do would be kit using document.getElementByID and good value to get the value and size of books, which we will call them. Plugged this to define what we shall do next. We would get the JSON response like this and add a function and let us add catch a function to login. It does go back to our function before to display our data and assign it to this pose. Let us make it spins right and see our API key. For example, Batman, our results and size attribute. It doesn't get better. Document.getelementbyid. It does create our container. And inside the for loop, we can access our designs using data. I get this, create a variable and assign it supposed to estimate. And here on the slide is a little bit of attributes, names is a JSON response. And postdoc was kept in B. We will create a variable named result section and assign it a div, which we're using document that create element. Lastname equals to 4, which will display the movie information in our code and assign it using document that create element variable name to call it the image, which would be assigned an image using Docker image. The image of the digital images Title VII is the title. Let's create another variable name to cut the body, which would be assigned the body. Using to create element. To add another variable name. They're called the Titanic, which will be assigned to the element. I did. It does. Okay. 8. To Do Application using MockAPI: In this video, we'll create to-do lists using custom data and using RESTful interface. Click on Get Started. You'll have to sign up and create an account for. In my case, I will sign in using my GitHub. I would add a new project to do and click on Customize our data. We need an ID for 22 and we will delete the other fields. As you see, these are our endpoints for both to-dos and delete. If we edit again, we can check our new todo. Update to an existing todo. I would create a new folder. Let us copy our index.html inside our new folder. It doesn't do any good. Inside the body. We would add a container. And inside this container. And inside this rule. This is according to bootstrap grid system. It is going to be our heading inside this div and create our form class. And inside it. And inside the div with ID equal title. And add another div. And inside it I will add to-do button and, and get to those buttons. Bottom line using a table, table at our table header. And inside the T head to add our table row. Inside this through at a table header cell th for the title. And add another table. Th Xin, add our table body. The body was ID to-do list to display our to-dos. Let us see how it will look like in the web browser. Let us go back to the job site. And it does cool our API and see it in action. And we have no to-dos for now. Let us go back to our ads clip type z. Let us create our function. Its name is fun to do with the parameter which stands for that click event. The event, the default behavior of a click event, which submits the full. Let us add a variable to-do list container and assign it to our table body element using the document.getElementByID, the ID of the to-do list. To do this, let us could eat our to-do list container contents. Right here. We will use feature function and create our API URL. And then after, we will call it like this, we will get this function. Get back to our function before our to-do list, and assign. Just copy this code inside this function. We would add a for loop. And so it's a full loop. We can access our todo using data of I. Could eat a variable and assign it to another variable. So fine. Data variable and assign it using documented create element td to do it a variable name and assign it an element, unquote. And then I'll take us through it. I've been some good addition to our TV, delete t d t o to do and functions as parameters. And we didn't get it. And finally, with the event, we will show an ID. And the ID. Get to assemble data. We need to do. Using the URL as JSON response, it does get better. I want a beach and get to-do list. And if we click over, this had to do with disability and we are deleting to do with id city. So everything is fine for now. Let us get back. And delete function will be the feature function. We have it function, function. And there have been other ID is deleted. We will get to those again to eat our to-do lists of deleting our to-do. Let us just our delete function on the to-do lists. And to-do disappeared from our list. Let us get back to our MOOC. As we see now, we have only seven to call our API using the URL. We also have our data and our site. Now we have no to-dos in our list. We need to add new todos through our four IT side, our textbooks. Using document.getElementByID. It takes that value, will be posted on buddy, will be just fine. And bus our data. Add an alert after getting the response. To do is edit successfully. Fund get to those again, to get our to-do list. Let us test our application of adding goals of functions. To do wash my car. Added successfully, added successfully. To do have a coffee added successfully. Let us our API URL, our to-dos response. Now we have to do nothing. Now let us nothing to do. And you go. Okay, that's it. 9. Improvements and Suggestions: Hello guys. And since we do talk about Improvement Associations to all projects, three marks. As we mentioned before, in our projects, we just use JavaScript and jQuery magic school. There are frameworks. Do most of our work for us in more standard way. Like BFGS. Angularjs framework has its own website and on documentation and tutorials that helps you to achieve the standard framework in your push. In my opinion, I will choose React js and they will go for. The HGS has become highly popular because of its simplicity and flexibility. 10. Summary: Congratulations for finishing this course. I hope that this has been a helpful list for routing course and that you feel more confident in understanding why and how you can use it to build your own applications.