Build Web Application without Coding Using Drupal 7

Presentation Information

This presentation describes how to create a web-based application using Drupal 7 without doing any programming. Presentation given to HackMGM (a Code for America Brigade) on September 21, 2017 in Montgomery, Alabama.

Code Repository

The code that was used in this presentation is available on GitHub at https://github.com/almostengr/fastwebapp.

Sources Cited

The URLs that are shown in the presentation are listed below: https://www.acquia.com/resources/case-study/fema-rebuilt-deliver-powerful-user-experience https://www.drupal.org/node/2374175

Watch The Presentation

You can watch the recording of this presentation below.

Transcript (Unedited)

All right so tonight we're going to cover building a web application without doing any coding like at all so and just for a little kicks and giggles all right so Who am I i'm kenny robinson I have a bachelors from in business from the university Alabama so I have a minor in computer science my day job is still in production support as an IT consultant and who's doing the automations data analysis process improvements the whole nine yards you can look me up on LinkedIn that is the URL and also have a github account if you go to the hacking I'm not doing my day job I'm doing stuff like this and this is a actual traffic light and the box in my hand is a Raspberry Pi connected with relays that I programmed and this particular scenario I was demonstrating it to kids teaching them how they can use computer science with electrical engineering you know it's possible career paths all right so what is Drupal Drupal is a content management system most people are familiar with WordPress or Drupal Joomla and Drupal is kind of the I won't say the redheaded stepchild kind of the fairy bleep snow it is open source it is created by dries fight art he's also a DC I think he's the chief information officer a company called aqua which drupal functionality outside of the core can be extended by using modules and WordPress people know this as plugins but it's the same concept Drupal is not often used because it is more technically advanced and you have to have more familiarity with it how to use it just more hands-on experience the current versions are version 7 and version 8 version 7 is still popular because of the fact those modules that exist to extend the functionality have to be rewritten for the new framework that is being used in version 8 so a lot of the sites including the one I'm going to use today it's written in Drupal 7 Trippel does have a command-line interface is known as thrush has packages in Ubuntu and maybe a other linux distros there's not one on Windows as far as I know and if you want to look up more about football the website is true filled out over all right so most people think intact I've never used the Drupal website not so fast so there are several websites the white house the FEMA and the Weather Channel all use Drupal behind the scenes The Weather Channel recently did they did a major upgrade probably roughly two to three years ago to switch over to the Drupal platform and as you know whether The Weather Channel does weather everywhere so they have millions of data elements that they are trying to law the track used for historical references pulling data from other places like the National Weather Service and so forth so if you want to read about that you can read up on the case study FEMA also has the Drupal website whoa and what they're still using like apps you know we go out in fields in the disaster areas like Florida for instance for the recent hurricane and this interface you know the Drupal website allows them to interface from their phones in the field and a lot of times if you look at a website you can conative whether it is Google based or not in the White House website there's this meta tag that does say rupal 7 is the generator of the site all right so I use Drupal in my personal setup one of which is farm OS farm OS is a particular truthful distribution and it allows for a YouTube manage is intended for usage with the farm but it's also can be used I use it as for garden and managing like grass and stuff like that so in that particular screenshot actually took a striking the red peppers that I've ever this year and decided to take a photo uploaded into Drupal and also use the data to track how much another use that I have for it is issue tracker so kind of like github has issues I use the same thing but for tracking issues with my house and with my vehicle and one other use you can use is automation you can Drupal has the capabilities of sending and receiving restful quests so for instance if you want let's say is you tracker to connect to my farm of s I can have my issue tracker trigger you know let's say something happen let's say I added an issue with the grass well that issue could be sent to farm OS and it's like well you create an issue over there let me log it over here as well and that allows for across you know automating tasks another thing that I've done is with farm or lest I have it pulling data from the National Weather Service the National Weather Service has an XML feed that is available for each locality so by pulling that data I'm able to use that to determine whether it has rain or not and if it has a range within the last seven days I have farmer les send the email saying there has been no rain you need to water the grass so there's many many uses of them all right now into the demonstration so these are the notes we're going to assume they're not great at coding or do not know how to code you have one business day to do everything with this particular project there are no project plans in advance it has to be a web-based application it has to have a mobile API and it must be browser friendly and you also have to like the ability to log into the website to do have the client to be able to log into their own updates thinking all right so we're gonna do this and it work when I tested it but as I do production support on the daily basis let's hope it still works all right so first things first we're going all right so all of the code that I'm gonna be showing this whole repo is here on github like I say you can link to my page from the hacking jam page as I'm a member on there and all the instructions that we'll be covering are listed here if we run across something that's not quite right I'll go back and correct it afterwards all right so the first thing we'll do is to set up Drupal so I have my dev server set up with the code files already in place so normally you would just go set rupal files put them in place so if your web server so forth alright then we'll do the standard installation and we're choosing English Music it's like we're already calling the fire department there we go okay so normally you have to enter your database credentials and it will prompt you give you a form so the database name the user ID password and the server credentials you would enter those but since I already have a settings.php file in place if you skip that particular part of the process all right the next step is to enter the site name so we'll just call it fast web app for short you have to enter the site email address Drupal has the capabilities of sending emails out all right then you set up your settings obviously we're in the United States time zone if you want update notifications you can put these in place if not you can easily just turn them off and save them continue all right and once loop was done it'll allow you to log into the website all right so with the standard installation you get a lot of additional modules installed that you really don't need so what we're going to do is we're going to turn those off and these steps are also again in the github readme file so we don't need comments dashboard database logging overlay and shortcut all right and then we do need to turn on some additional modules to get honest functionality so we need scrolling down we need see tools this is called see tools for short but it was chaos tools services which will enable the usage of REST API and then we also need the rest server alright and we could continue if you forget to check something Drupal says hey I need this to complete this you just turn it on either way all right so we'll go back to the home page and we're gonna create a new content type well new content when you use the standard into installation it creates the article in the basics page content types for most of if you're just creating static pages you'll use the basic page type and we will say all right so now we have the first page is active and it can be accessed at this URL all right so now that we have one page in place we're going to make this site mobile-friendly so there's a theme here called Mayo and we're gonna enable that and also set it as the default and then we'll go into settings and with Drupal a lot of times the configuration items do not initially save to the database when you set them up so it's always best to go in and save the options even if you don't change them initially all right so this is our mobile friendly thing and if you resize it you see how it kind of puts everything in a single column but if you expanded there's the sidebar that's over here now so we've completed the the mobile browser version of this all right so the next is to go to the structure and we can rearrange the items on the page like if you wanted to search bar to be below the navigation go to structure locks and here are each of the blocks and so there are additional blocks at the bottom that you're not using if you want to move them around life I wanted to get rid of this power by Drupal just move it down to the disable section and if I went to search box below the navigation I can move it there and then hit safe and so now you see the search box is below the navigation and also the Drupal footer is removed right same concept different name alright so now that we've done our page layout we can go and create our REST API so we go to structure again and services and so we're gonna add an endpoint and we're going to name the endpoint now the machine name is the internal name think of it as like the unique identifier for that particular service so we're gonna name it API and machine names have to be lowercase if not if you type the wrong thing again and it will display an error and the server we're going to select is the rest server this is one of the options that we turned on did our module updates so we're not gonna do session authentication that's a little bit more complex for this particular demonstration and so we'll save and now we have our REST API available so we'll go to edit resources and we need to be able to pull content from that REST API so we're going to note is a so in Drupal there's a concept of entities and users are entities pages which we refer to as nodes are also entities and taxonomy which is kind of like keywords or categories also known as entity are types of entities so with the node entity basically basically page is a type of node and they know it is a type of an entity so in order to be able to access the page that we did create we'll need to be able to retrieve a node and if you want to list all of the pages you'll need to turn on the indexing of a node you can create nodes but we won't do that in this demo that's also a little bit more advanced so now that we have our retrieve and index capabilities turned on for our API we will get save all right so the next thing is to test the rest API is Firefox Chrome as an extension not for sure of what it is but I do know that Firefox also has an extension called poster all right and you can take this URL so by default when you do a API request and will return the XML but if you put dot JSON at the end of it you will get a JSON response and so here is our Dixon response that shows the full list since we only have one node is only listing that one node but if there were additional nodes it would show those as well all right and to get only just that particular node you specify the node ID and the node ID can be found by either going to the page and looking at the URL or you if you're looking at a database you'll see it the same way you'll have this unique identifier over one so we just append that to the URL and do a get request and these are all the elements in that the revision ID we have the user ID the title status whether the node is visible to the public or not his commenting turned it on turned on or not is it promoted to the front page and various other elements in here as well so now you have a fully functioning web application that is also mobile friendly and it did not take you eight hours to build it with the rest API so any questions and yes you can have more questions yes it is it's the quick and short version there it is a little bit more elaborate if you want to get more involved as far as like you can with the Bicentennial application that we're building we actually have custom additional content types that we're using and that allows for us to have additional fields so we can go in and put in let's see so we can specify field types these are just the default types but but I'll say you can add additional modules there's an email fill type there's an address field type there's all kinds of additional field types that can be added and it will do validation on that type you know if you make it mandatory what is it this is my sequel but it also supports sequel Lite I think it is yes yes we have some of them available we do have some of them available but we're still working on everything else we have a high level view of everything at this point then we'll tweak it as need be yes trying to get so I'll give you a history of I'll give you a history on that so where I work my our clients we had a system you know the system that does all the access provisioning and so the I guess the root user is called I am admin so I just kind of took it from that alright so here's the historic marker content type and so in here we have the stuff that you would probably think that would be necessary so like what county is it in what city location don't ya picture the ability to put pictures in here as well yes yes and see even even if you don't want to Jason even if you don't want to Jason output also you