Making a WordPress Website With a Database Application

hello everyone welcome to today's class in today's video I'm going to teach you how to build a web based application and how we can embed that application onto a wordpress.org website to build the application we're going to use a company called Castillo now caspia is really great it allows you to build your website applications very quickly in fact you can build an application ten times faster than using traditional development so if you're not a coder if your business user or if you do have a programming background you're going to find Casspi a very very user-friendly and intuitive and you're going to see how easy it is to prototype applications and how quickly you can go live with those applications on your own website by simply embedding these data page frameworks onto your site and in the next hour or so I'm going to teach you how easy it is to do that using the caspia platform now for our website our content our logo navigation menu and all the content on the web pages I'm going to be using wordpress.org hopefully if you're watching this video you have a background of using wordpress.org you simply have to download the files and host the files with your hosting provider in this case I'm using one and one but you can just as easily use GoDaddy or a different hosting provider and as soon as you upload your files you have access to your admin panel from where you can choose a theme for your website you can modify your web pages you can modify your navigation menu and just you have a lot of flexibility on how you can you know arrange things and fix your website now before I show you how to do this in WordPress and caspia let me first give you a quick demo of the application so you have a good idea what we're going to be building today and I would actually encourage you to set up a Castillo trial account you get a 14-day trial and I would encourage you to follow along with the video pause if you need to pause and try to replicate some of the stuff that you see in today's class inside your Castillo account you'll see how much fun it is and you're going to be very thankful at the end because you're going to have a full built application created without writing a single line of code now in this example what we have is a simple directory of medical doctors so if you go to this URL and by the time you actually see this video I may take this URL down because it is a fictitious website so I have the ability on the home page to select a specialty for a specific doctor that I would like to find in my area and as soon as I click search we're going to see a nice map that pinpoints the location of each one of these professionals we have a photo we have their basic information and then I can go to the details page for a specific doctor to view additional info and I also have the ability to now contact this empty if I wanted to you know book an appointment or get a free consultation depending on what type of functionality you allow for on your website I'm also going to be teaching you how to set up this Google map and how you can integrate that Google map in your own applications by using caspia another part of this application that I have enabled is the ability for MDS to be able to create an account so we have a self registration form for them to create some basic information and also provide login info and then they also have the ability to check their messages so if I log into my portal is John I will be able to manage and retrieve all of my messages and be able to update my profile if I wanted to update my photo my about me profile and also select other information pertinent to my account so this is where you're going to learn how to build in today's class it shouldn't take more than an hour I hope that you take the time to watch the video and hopefully you'll be able to replicate this application inside your own Castillo account let's take a look okay so what I've done so far for today's demo is I have actually removed the application from our WordPress website because I want to show you how you can build it in Castillo from scratch and how easy it is to actually embed that application into our WordPress pages so if I navigate over to all of our pages you'll see that you no longer see that application okay so I'm locked inside my wordpress org panel and hopefully you're familiar with this screen if you have some knowledge or a background of using WordPress org dis panel and these objects you should already be familiar with and then I have my pages created for my website the first thing that you'll probably do when you log into your panel is you're going to choose the theme for your website so depending on the direction of your website or if you have a specific industry that you're building this application for you're going to take a theme from this page and you're going to be able to customize that theme after you have selected it once you have your theme selected you're then going to navigate over to pages and using this button up here to create a new page you're going to set up all of your web pages that you would like to have for your website now as I always mentioned in my other videos when you're building a website and if you want to or if you desire to have an application embedded into your website think about in advance where you want that application to be embedded so as you're devising your content for your website you want to envision where you want to have the registration form embedded so you want to leave some space on your website so you can position that form later on once you have your web pages created the next step is to set up your navigation menu and link all of your pages together so when you're done you're going to have something similar that looks like this now you might have a different theme waiter navigation menu is positioned but when you're done it should look more or less something like this where you can link back and forth between all of your web pages now keep in mind as I mentioned before today's video we're not going to focus in depth on how to use wordpress.org I'm going to navigate a little bit hopefully you're going to have a good understanding of how that works the main focus of today's video is to show you how to build this application in Castillo we're going to take it step by step and then later on I'm going to teach you how when you edit the web page how easily you can embed that caspia widget inside your web page so you can have that function al the embedded and deployed on your website okay so I am now logged inside my Castillo account and the very first time you log into your Castillo account your going to be taken to the home page where you see the list of all the applications that you've built as long as you have had your Castillo account now inside my account I have quite a few applications already inside there because I've had this account for quite some time but again when you first log in you're going to see just a single container that's going to say sample contact management application and that's just a demo for you to explore so that you can see how things are built inside the caspia platform one thing that I want to mention here is Castillo is a truly enterprise grade platform that allows you to build many applications and you can use these applications for different departments you can eventually become a reseller so you can sell these applications to other companies so there's a lot of ways on how you can leverage the platform for your own personal needs or for the organization's needs and that easy way to begin building applications in Castillo is by simply clicking on this link new app and when you do that you're going to see two options on how you can begin you can either build your application by importing data from either Excel CSV Access database XML any kind of comma delimited file and that allows you to quickly and easily import your data and all of the table relationships into your Castillo account which will drastically speed up the development process of your application however if you don't have any data that you wish to import you can begin building your application from scratch and this is what I want you to do in today's videos so if you do have an account created go ahead and click on this button here to begin building the application from scratch and when you do that then you're going to give your application a name now depending on what type of application you're building you're going to have your own naming convention so for instance if you're building a CRM you can just simply call it CRM if you're building inventory management you're going to call it inventory management now I have already given my application a name this is the name of my application I already wrote it and as soon as you write your application name you're going to be prompted to click finish and as soon as you click finish you're going to be able to see that application container created along with the application name and from there what you want to do is click on open and this is going to launch the objects panel on the left hand side and you're more than likely going to use most of these objects to create your application that you started building now the overview screen is mostly informational this screen is for you to keep track of your progress and to add your notes as far as what you're building with this particular application so for example I can edit the first box here and I can put a description for what this application is supposed to do so for example I can say this app will allow our website visitors to search and contact MD professionals you can also attach an application icon so if you have some kind of an application icon that you can add and once you click Save here you're going to be able to see that icon along with the description for that application what I really like about this icon if you go back to the home page where you see the list of all of your other applications you're going to be able to see that icon attached to that application container which in a way helps you differentiate this application from the rest of the applications that you have inside your account when you click on open again we're going to be once again taken to the overview screen where we can continue adding our notes and screenshots for this application so for example I can add a note and say today I will build the registration form for our website visitors and in this case our website visitors can be users that are searching MD professionals or MDS themselves if you if they would like to create an account on our website you can also attach a screenshot I really like this area myself because if you have a blueprint or some kind of a skeleton or a wireframe on how this application is supposed to be structured you can attach that file here gives you a really nice visual as far as what you need to build in terms of the workflow and direction of this application and after you've added that file you can click Save and you will be able to see that image attached directly below once you've added your notes in the overview screen when you're ready to begin building your application the most important place where you want to begin is the tables object tables with any application that you build or any application that you've come across on the web has database tables because that's where you have all of your table relationships set up so that you can have a nice database structure which is going to be a solid foundation for when you start building your input forms your reports and just to give you an example if you have let's say a one-to-many relationship or a many-to-many you have to have your table set up correctly you know so you can normalize the tables and you can have a better performing application now to speed up on time with today's video in today's class I have already created four of my database tables and I'm going to walk you through each one of the tables so that you understand what fields I have in the table and you understand how they were actually set up so let's begin with the first table this is my medical doctor info table and this table contains all of the information pertaining to my medical doctors that are registering on our website so I'm going to click on design and if you don't have any tables built in your account to build a new table all you have to do is click on this link at the top so go ahead and do that I'm going to click on design because I already have the table created and these are all the fields that I have listed inside this database table feel free to pause the screen now here and copy these fields that I have in my account and go ahead and just input the same fields in your table so the first field that I have is doctor ID and I am assigning a random ID to every single doctor that registers on my website now in a correct database design every time you're collecting information you want to stamp a unique identifier to each record that you have in your table because later on you can relate that record to another table so if you have a parent to child relationship you can use that ID and stamp it into and propagate that ID in different tables so now every time a new member signs up on my website they're going to automatically get a unique ID assigned to their record then I have date registered because as an admin of this application I would like to know what date and time all of these doctors signed up on my website account status we're going to use this field to actually control who has the ability to log into the application and who does not have the ability to log into the application the rest of these fields should be self-explanatory so for example name I would like to know the name of the person that's signing up on my website we have the email field now I turn that into a unique field because every doctor that signs up on my website should use or should have a different email from all the other doctors because it needs to be a unique email or different email for every single doctor that signs up I also have a password field which I turned into a password data type so it's encrypted on the table on the database then I have the about Me section so I would like some my doctors to be able to provide some basic information which will more than likely translate into additional text so instead of having up to 255 characters I want them to be able to provide more information in this field I have the photo field because I want my doctors to be able to provide a picture of themselves specialty now the specialty field is going to be used for them you know to identify themselves what type of a doctor they are you know if there are neurosurgeon if there are psychiatrist etc education I want to know what school they went to where did they get their degree what languages they speak because if I have a user that wants to find an MD specialist and let's say they speak Spanish you know they want to be able to find a doctor that speaks that language so we can filter out the doctors based on that specific language city state zip and of course we have down below another checkbox here that allows the doctors to be able to publish their profile to the directory so if I'm a doctor and if I haven't updated my complete profile I don't want my profile to be public yet until I have completed it so we're going to use this checkbox to allow them to do that to filter out when they are actually want their profile to be shown my second table is a table of messages okay and in this table I want each one of my doctors to be able to see their own messages from within the database okay so if I log in as John I only want to see messages that belong to me if I log in as Kellie I only want to see my own messages so in this table I also have doctor ID because what we're going to do is we're going to stamp the doctor's ID from the prior table into this table and that gives us that relationship because now we have a common value between these two tables okay so the related table is based on this doctor ID field I also have message ID which is going to be a randomly generated unique ID for each message date sent name of the person that's submitting the message their email their phone number and the message itself again I turned that into 64,000 characters because I want them to be able to provide more text in the message my last two tables are going to be very simple tables they're going to serve as the look-up tables if you're ever creating a drop-down for example or let's say some kind of a lookup drop-down in this case I want to be able to just look up a table as opposed to adding custom values so in my specialty's table if I click on design you're going to see that I only have one field in this table called specialties but if I look at the data in the table you can see that I have quite a few specialties listed because these are although most of these are specialties that pertain to doctors ok what type of a doctor they're going to be and in my last table I also have one field for States and this is also going to be a lookup table so I'm going to dock the registers on the website they can select what state they actually are from okay and I'm also collecting one thing that I didn't mention in my info table of all the doctors if you want to have that NAP functionality that I have on my website where we can pinpoint the location on the Google map it's important that you have the address information so you want to collect this information from your doctors that way you can pinpoint their location onto the Google map okay so if your application doesn't call for that you have no need to collect the address info okay so as you can see this application is only going to have four tables and if you have paused the screen and click on new for each one of these tables you should have the same tables inside your account now the nice thing about Castillo if you do have a database background you can click on the relationship screen and this screen actually allows you to see a nice visual of how your tables are going to be related so what you want to do is you want to include those four tables that you just created and then you're going to draw out the relationship by dragging a line to the next table and as you can see from this image this is my main table where all the doctor information resides here's my messages table and we have a one-to-many relationship because each doctor can have many messages these are my two look-up tables there are very simple look-up tables it's a one-to-one relationship so you simply just drag the specialty field over to the specialties lookup table and the state field to the state now this string can get overly complex especially if you have a database background if you've used access in the past I've seen this screen have up to you know 50 to 60 tables and very complex relationships that are many too many and one-to-many and Casper as I mentioned before is the true enterprise platform so if you do have a need to build something more sophisticated and more robust you can actually do that in caspia and using the views and the authentications object which we're not going to cover as much today but I do want to point this out that if you're building a multi-tenant environment where you have managers admins employees etc you can build that type of an infrastructure where you actually have different user roles log in and have different privileges so if admins need to be able to edit managers can only read the data whereas employees only have limited access to certain information Castillo allows you to build that type of an environment very very quickly and you're going to see a glimpse of that in today's class so let's move on to the next section of the video now that you have a better understanding how tables work in Castillo and in general you should be able to move forward with the application and start building all of the application interfaces that we're going to embed into our WordPress website each application interface that you build and in Castillo we call them data pages each data page that you create is going to link back to your tables or if you're building something a little bit more sophisticated you're going to be able to link it back to a view we're not going to talk about views today but if you watch other tutorials that we have in our knowledge base you're going to be able to see that by using views you can combine tables together using common values to give you those table relationships and database relationships let me show you how easily now you can build a registration form for the MDS and how easily we can put that registration form on our WordPress website so to do that we're going to go to data pages and what you want to do here is you simply want to click on new data page and this is going to launch Castillo's point-and-click data page wizard if you look at this navigation menu on the left-hand side these are all the different types of applications that you can build using our point-and-click tool you can build forms you can build different reports for reporting capability you have anything for tabular gallery if you have images you can also do pivot tables just like in Excel so if you wanted to do more complex calculations and aggregate data you can use pivot tables we also have calendars so if you're building events or maybe an appointment tracking application calendars are a great way to set appointments you can also build different charts so if you have numerical data in your tables and you want to do some calculations for revenue or forecasts in a CRM charts are a great way to use because then you can visualize your data in a chart and it helps you understand you know how much revenue you're bringing in how much forecast etc and finally if you're a little bit more technical if you know how to code in HTML you can use this specific HTML data page to build more sophisticated and robust applications but for right now what we're going to do is build a simple submission form which is going to turn into the registration form for the MDS to be able to sign up and register on our website because the submission form adds data back to our table so we're going to click Next here and using the data source drop-down this is how you link whatever table you want back to your data page and in this case I want to link to my info table because that's where all the information resides all of my MD fields so if you recall from a couple of minutes ago we talked about doctor ID name email password specialty languages etc so that's where all those fields are inside that table so I want to link that table to my submission form I'm going to give this data page a name this is really for your eyes only I'm going to call this MD registration form from this drop-down you can select a specific style which pertains to aesthetics the look and feel of your forms and reports and you can fully configure your own style by going to this object calcio gives you access to CSS and you can also use our WYSIWYG way to quickly modify the color of your labels color of your fields with just the point-and-click interface I have a specific style design for this website so I'm just going to use this style localization is used for regional settings so if you wanted to for example change the language of the form to that specific region you can apply that localization and today we're going to use English and default we're going to skip this for now we'll talk about this in a couple of minutes I'm going to click Next and now you're going to be able to see all of those fields from within that database table that we created a few minutes ago and it's asking me what fields do you wish to use in the webform when you're building a registration form on your website you don't want to overwhelm the user with too many fields okay that's kind of a turn-off for me personally if I have to see a registration form that has too many fields I would rather fill out four or five fields and then when I log into my account then I want to complete my profile so let's go ahead and include date registered will include the name of the doctor email password and let's say that I want to include anything else in the registration form I think that's about it that I want to have in my registration form the rest of this information we can include this after the doctor logs into their account so we'll hit next and when you get to this page where it's asking me to configure properties of each one of my fields you can select each field on the left hand side and you can make modifications on the right side so for my date registered field I would like to turn this field into some kind of a timestamp I don't need my doctors to just add their date when they're registering that should be automatically stamped in the database so when you click on this form element drop-down you're going to see an option here for timestamp the field is going to be hidden but in the table it's going to stamp the date and time for my name field I would like to make this field required which means that the doctor cannot submit the form until they have added some information inside the name field here is my email field now we have a special element for email and if you do this it's going to look to validate the email so it's looking for the @ symbol and the period after the @ symbol so both of those characters are in there you're going to be able to provide your email address you can also do things like repeat for confirmation to ensure that the user is inputting the same email twice you can enable this checkbox for them to duplicate the same email and finally we have the password field we have some settings here for password options I can enable password strength and I can also have a minimum strength required so if I wanted to add a password that's a combination of uppercase characters and maybe some numbers you have a couple of options on how strong you want a password to be configured now before you save your changes and click finish if you would like to preview to see what this form looks like you can click on this button and that's going to show you what the form looks like at this point please don't pay any attention to the aesthetics okay the whole focus of today's video is to show you the workflow and functionality and the speed of development okay so I'm going to close the preview screen and if I'm happy with my changes I'm going to click on finish to save my changes and here is my very first data page created now to put this on my WordPress website this is my favorite part you're going to see this link called deploy click on that an able access and then cast view is going to give you five deployment methods you can use the embed model all you have to do is copy this snippet of code and paste that code into your WordPress web page publish your site and you're going to see how that seamlessly embeds you can use a direct link if you'd like I frame dotnet if you have a SharePoint environment and we have a quick snippet WordPress code that you can use as well because we have a lot of customers who use WordPress in conjunction with caspia we've come up with this deployment method so it's much easier for you to embed your caspia data pages I'm going to be showing you today the embed model because that's a very popular method for caspia customers so like I said all you have to do is copy this snippet of code go back to your WordPress content manager go to that page where you want to embed that form and for me it's going to be my registration page and all you have to do from here is paste that code like this click on update and now when you go back to your website and you go to the registration page you're going to be able to see that form seamlessly embed into your website this is how easy it is to build a form in Castillo connected to your back-end database and now when the users fill out this form you're going to see that information feed back into your table let's take a look so I'm just going to simply fill out some information here we can say John Doe it's asking me to confirm my email let's create a password here so we'll say test 1 2 3 test 1 2 3 when it comes to aesthetics one thing that I want to point out here I'm usually blunt about this there is no form on the web that I'm yet to come across that you cannot replicate inside Castillo Castillo really is that powerful in terms of customization so you can have multiple columns you can change the color of the fields you can change the color of the buttons you can arrange things any way that you want in order to fit it nicely inside your website as soon as you fill out this form and click Submit that information is going into your Castillo database table let's take a look now that this form is linking back to my table I can go back to that info table click on open and I'm going to be able to see that very first entry submitted into the database notice that I'm only filling out a portion of this record if I scroll to the right the rest of the information is still left for John to fill out but only when he logs into the application so how is John going to be able to log into the application well in order to do that we have to create what's called an authentication so we're going to go inside this object and to build a new authentication all you have to do is click on this link and this is going to launch Castillo's point-and-click authentications wizard and with just a few configurations you're going to be able to build this out and have that login effect on your website so for our data source in this drop-down we're going to select the info table because that info table has all the credentials for all of our MDS so John's email and John's password reside inside that table so that needs to be my data source for the setup options I always like to use custom because you get a lot more customization options and there are four ways on how you can password protect your application the recommended option which is the caspia data source is this table that we just selected so it's only going to use the information from that table John's email and John's password once again if you use ID services you can have social media enabled into your application so if you want John to log in using this Facebook account his Google account or Twitter or open ID depending on the service that you wish to use you can use that second radio button the third radio button allows you to have a combination of the recommended data source which is this table and also ID services and finally if you have sam'l which is Active Directory so single sign-on if you want to use let's say your Windows credentials and this option here is primarily used for internal applications that our customers use so if you want them to be able to log into the caspia application along with their let's say their windows login you can pass those credentials to the application that way they don't have to log in twice one for the windows and one for the web app itself so just to give you one example of how Active Directory works in our demo today we're going to use the recommended setup option and down below you're going to be able to see the two credential fields email and password now for the email field you can see my label says username I always like to rename that so it says email it's a bit more clear and it allows the user a better direction or better instruction on what they're supposed to type inside that field when you're done just scroll down and click on create and let's call this MD authentication when you're done click finish and here is our very first authentications object created you once you have this created you can now apply this authentication to any one of the data pages that you wish to pass or protect using that authentication now obviously we're not going to apply that to the registration form because the registration form needs to be public facing so whoever comes to my website to this page they need to be able to fill out this form let me give you an example what happens if I pass or protect the registration form so if I click Edit on this data page and if I click Next and come to this screen where you see access and security if you recall from a few minutes ago I bypass this portion of the wizard if I enable this checkbox and if I now apply that MD authentication object to my data page and click finish watch what happens on my website when i refresh my page you're going to be able to see the login screen applied on top of that registration form okay so let's revert back to what we just had because we don't want the registration form to be password protected so simply just edit the form come back to that screen and uncheck this box click finish and let's verify to make sure that that login screen is no longer applied and it's not the data page that I want the password protect is the update profile page so let's go back to Castillo and let's build a brand new data page and this time what I want to build is not a submission form because remember the submission form adds new records to your table this time I just want to update the record so we're going to select single record update because I want John to be able to update his profile so I'll select that data page click Next and once again I want to select my info table because that's where all John's information resides inside that table I'm going to give this data page a name I'll call it MD update profile of course you can call it whatever you want I'm going to use the same style my wordpress style that I created and this time I want to apply the authentication because in order for John to update his profile he's going to have to log in first now this screen here you want to set record level security you want to actually have doctor ID - doctor ID in these two drop downs because when I log in is this doctor based on this setup here you're only showing that doctor their own information so make sure you verify the authentication with the current data source to be set to doctor ID and now just like before what fields do you wish to use in the webform in other words what fields that you want the doctors to be able to update this is completely up to you I want to show them their date registered I want to show the name email I'm actually going to include quite a few fields here because I want them to be able to update all of this information and then on the next screen here is my date registered I don't want them to be able to update this I'm going to keep that as display only in other words read only the name field and again this goes this is completely up to you how you want to set up your application you can choose to give them the ability to edit their name or keep it display only and only you as the admin have the ability to edit their information or I can make this a text field and give them the ability to edit that again completely your call and how you want to set that up I'm just going to keep that as display only email I do want them to be able to change their password if they want to so we'll go ahead and show password strength minimum strength required fare and then I want them to validate their current password before they can change it to a new password that's very common practice you'll see that in a lot of applications here's the about Me section I'm going to turn this into a text area and what a text area does it gives you the ability to see a bigger box so you can see what character is you're typing inside that text area now at any point you can actually click preview to see what this looks like okay so if you click preview now before you save your changes you're going to be able to see a login screen now so let me log in as John because I already have this credential in the database so test one two three and once you log in this is what my update profile looks at this point okay so I can provide my current password I can change my password and I can also provide some information in the about Me section okay which as you can see is a nice text area and then we can expand this text area if we want to here's my photo field let me go back to my Castillo account here's the photo field and for the photo field I want this to be a file and I want to display the file as an image and I want to set the width of my photo to let's say maybe 450 pixels I would actually keep the height empty because if you set it to 450 let's say by 450 and if your image is in a rectangular shape it's going to skew that image and it won't look proportionate so keep the width only and leave the height empty so it keeps the same parameters of that image when you upload the file alright and what this is going to look like if I hit preview again you're going to see that now I can choose a file to upload on this profile specialty right now again it's display only I can change that to a text field but better yet I'm going to turn this into a drop-down because if you remember one of my tables I have a table that contains all the specialties and we're going to use that table as the lookup table for this drop down so instead of adding custom values manually here which is a very tedious process you know by adding you know dentist click on new to add a new specialty let me delete this you can look up a table and you can link that specialties table that we have from here and link it to your drop down okay and if you simply just do this configuration and click preview again you're now going to be able to see a drop down of all of those specialties it's a much much more effective and efficient way to build your dropdowns okay you'll see how much faster you can build your applications by creating the drop down the table first then linking that table to your drop-down education I'm going to turn this into a text field languages spoken text field address same thing state I mean city text field for the state field I also have a lookup table and now that you know how to do that we simply select drop-down lookup table and we're going to link that to our state's table I'll hit preview one more time so that you can see what's happening on the form and now I can select the list from the list of all of the states all right here's my zip code field I'll turn that into a text field and publish profile I'll turn that into a check box and display text I'm going to say check to publish profile let me preview this so you can see what this display text means here's what happens when you put the display text it appears to the right of the check box okay and this gives the doctor now the ability to check this if they want their profile to be shown to other users if I don't want my profile to be shown I will keep that unchecked okay once you're happy with all of your changes close the preview click on finish and now you can just like before just like the registration form I can grab the deploy code enable access grab the embed code copy it go back to my admin panel and WordPress find the page to update my profile edit and paste the caspia code let's update and now let's take a look at our website if I go to profile I am logged in as John Doe and now I can complete the rest of my profile inside this application so let's go through this really quickly I do want to show you what this eventually looks like so let me provide my current password which was one two three my new password can be the same thing about me I have been practicing medicine for the past 10 years and then you can add more information here if you'd like for the photo I'm just going to use that same app icon that I have in my application specialty can be surgeon education can be Stanford language is spoken let's just say German for example and for the address city state and zip I'm going to use the caspia headquarters and I want my profile to be public so hit this check box click update and now that you have updated this information if you go back to the database table that info table that we have what you'll notice now that the entire profile for John is now completed so the rest of the fields have been updated by John and now if we get a new user to come in and registers we're going to be able to see a second record populate inside our table the next thing that I want to show you how to build is a report that allows the users to be able to filter and search all of these MDS and we only have one MD in the day and in the database at the moment so let's go back to data pages let's speed things up a little bit here and we're going to build our third data page and this time what I want to do is build a report because what the report is going to do it's going to allow me to look up information from our table so the forms allow you to input data and update records whereas reports allow you to actually view the information from the table on your website and I'm going to go with the tabular format in this example if you look at the illustration below this is essentially what you're building a search form the results page and the ability to drill down to details of each one of these and these we're going to click Next once again I'm going to select the same table because that's where all the MD information resides and we're going to call this data page search MDS I will once again use the same style that I have set up and I'm not going to enable authentication because the ability to search MDS should be public facing meaning whoever comes to my website should have the ability to find an MD I would like to have a search form enabled so I'm going to select this radio button and now I want to be able to search based on two fields in this example I want to be able to search based on the specialty and also zip code because I want to find these MDS in my zip code and based on a specific specialty on this screen I'm going to configure the properties of each one of my search fields for specialty I already have a lookup table so I'm going to instead of a text field I'm going to select drop down and instead of custom values and lookup table we have this option down for both under custom values I want to say search any delete the value because you don't have this inside a table this is going to give you a null value basically it's going to return all records from that from the table of specialties because you're not selecting a specific specialty and now for the lookup table tab I'm going to select my specialties table for the zip code field I would like to have this be comparison type contains because if you leave it as equal you have to know the exact zip code conversely if you put it as contains it searches for a partial keyword or partial numbers of or range of that zip code in this case now what fields do you wish to use in the results page so after you click search what information do you want to display on the results page so let's have the image of the doctor let's have their name maybe their email tab their specialty education language is spoken now you can include as many fields as you want this is completely up to you I'm just going to include these fields for now I may choose to include more fields in the details view but for right now we're going to include these fields one thing that I forgot to enable on the form if I go back here on the search form I also want to have this checkbox filter so it filters out who are public profiles versus not public profiles so we're going to include this field and for that field here in the search form I want to be able to hide this field and if the profile is checked display those profiles if it's not checked don't display those profiles in the directory this is what that checkbox means for published profile okay so we have these fields for a results page I'm not going to allow any editing capability I don't want my public visitors to be able to edit the MD information now let's configure the results page field so here's my photo field I'm going to display that as an image and I'd like to have a smaller thumbnail maybe 100 pixels displayed for my email field I would like to render this value as an email link let's display 25 records per page now in my table I only have one record John Doe but if you had more records in there you will be able to display more write more records per page let's enable the details page and in the details page let's include a little bit more information so let's have the photo of the doctor let's have their name email about Me section specialty edu languages city maybe we can include the address to where their practice is okay and finally let's configure the details page field so I'm going to have the photo field here as well I'm going to display that as an image let's have a bigger image now maybe 250 pixels once again will render the email as an email link we have the about Me section and the rest of these fields we can keep it the way it is and when you're done click on finish to save your changes and now we can easily deploy and embed this report to our WordPress website let's click on deploy let's enable access let's copy the snippet of code and let's go to the page but that allows me to search or find a doctor paste the code update and let's take a look so let's go to find a doctor and you'll see now we have this nice ability to find a doctor based on a specialty if you keep that at search any leave a null value and you don't enter the zip code hit search you're going to be able to see that one record found from within the database this is the doctors image we have the information here I can go to the details page and be able to drill in on more details about that doctor so hopefully now you can see how easy it is to navigate caspia believe me if I wasn't explaining anything I could literally build this application in 15 minutes or less once you get comfortable with using Castillo and you understand how to build your tables and your data pages and how the data pages link back to our tables you can build any application in fact even a more complex application that has about 50 data pages maybe 25 tables you can build that in just a few hours and you can have a fully functional application built now if you were to compare that to traditional development you have a great understanding now how long and how many months it will take to design something like this versus caspia that allows you to build this very very quickly the next thing that I want to dive into is now how do we connect a Google map to our application so you can see a nice visual where each one of these MDS is located let's look into that next so how do we actually incorporate a Google map into our Castillo application this is actually very easy to do it's one of my favorite things to do because I love using Google Maps to pinpoint locations of data and you can do this within just a couple of minutes let me show you how it's done the first thing you're going to want to do is visit a Castillo's knowledge base which is how to Castillo comm and here you can find just about any written or video tutorial to help you learn how to use the platform and what you want to do is search for something called map mashup go ahead and click on the very first link and if you read through these instruction you're going to be able to literally set this up in about ten minutes and you will have that map just like I showed you at the beginning of the video embedded in your own website so I'm going to show you how to do this very quickly I'm just going to scroll down a little bit and you'll find this link that you can click on and then what you want to do here is you want to provide the same credentials as your caspia bridge account and once you log in you're going to be taken to the map mashup wizard and this is where you configure your map for your application so play around with these options to see what kind of width and height you want for your map I'm just going to set the width to maybe 900 pixels and my height can be 300 pixels you can decide what zoom level you would like to have on the map so if you wanted the world continent country I'm just going to go ahead and zoom in on the state level in my details page I'd like to zoom into the city level and for now I'm going to click Next and then it's asking me to select the data page from my account that I would like to connect the map to now if I look inside my account I have this data page called search MDS and this is the data page that I want to connect the map to so I'm going to go back to the wizard and select that data page if I scroll down here it is I'm going to hit add and then you have a couple of more settings and options here on how you wish to configure the map for my address fields I'm going to include the state city and address and I'm also going to include the zip code and hit add you can choose what pinpoint you would like to have displayed on the map I'm going to go with this blue icon you also have the ability to have your own custom image so if you have a specific image designed you can host that image and then just provide the reference link to where that image is hosted and now it's asking me for some advanced data page settings I want to show the map on the details page meaning that if I click on the details link I would like to be able to display the map here on the details page I want to hide the map on the search form and what that means is on the search form there's no reason for me to show the map on the search form and finally when you're done you can click finish and this is going to generate some snippets of code that you're going to need to cut and paste inside either your WordPress website or your data page application wizard either one or the other will work in this case whatever preference you have I'm going to use the data page wizard so let me show you how this is done I'm going to copy this code that's been generated I'm going to go to my data page wizard and edit my report and wherever you want this map to show up you're going to have to paste that code okay so for example I want this to show up in my results page so once you get to this screen to configure properties for the results page fields you're going to insert a header and footer and inside our header section go to the Advanced tab disable the HTML editor and paste that code like this I also want the map to show up in the details page so I'm going to click Next and once again I'll go ahead and add a header and footer disable the HTML editor in a header section of my details page I'm going to paste that code let's go back to the configuration scroll down and now it's asking me that you want to hide the map in the search form so I have to grab this code go back to my data page and let's go back to the beginning here is my search form configuration screen and here I'm going to insert a header and footer once again Advanced tab disable the editor and paste the code and what this line of code does it hides the map from the search form the next thing that we need to copy and paste is this snippet and this is to display the bubble in the map on the results page so let's go back to the wizard click Next a couple of times until we get to the results page and this time I need to insert an HTML block I'll move that down disable the HTML editor and paste that snippet of code and the very last step is to grab this snippet of code go back to my wizard and in the details view we're going to also insert an HTML block and we're going to simply just paste that code okay don't forget to insert an HTML block and paste the code in here once you're done with that there is one more step left to do go back to your map mashup instructions scroll down a little bit and you'll find this div tag that you're going to have to copy and this is going to be the very last step once you copy this div tag go back to the wizard this is my details page in the header underneath that long line of code just paste the div tag and then one more place which is the results page in the header we're also going to paste that div ID underneath that long code if you've done this correctly and hit finish this is where you're about to see on your website when you click search you're going to be able to see that location pinpointed onto the Google map and we can see that John Doe is located here and Santa Clara we can also drill into details and you will see how the details page it automatically zooms in to that location down to the city level okay so this is how we in Castillo we can create some really cool functionality by adding a Google map to the application so if you're building let's say some kind of a distance search application to search within certain proximity x' or vicinities you can enable this feature and have a really nice application interface embedded in incorporated into your app now for the last step to complete this entire application what I wanted to show you is now how can the users that find a specific MD be able to send a message and for the MD to be able to log in and view those messages that are coming in so this is going to be a little more advanced slightly more advanced you're going to have to know how to write one line of code which I'm going to help you do in the video and we also have those instructions available in our knowledge base if you go back to the knowledge and if you scroll down and find a section on parameters you're going to want to look at something called parameters as query string values and the easiest way for me to explain what we're dealing with this is we're basically just passing data from one database table and storing that information into a different database table this is how you create common values between tables and with this functionality which is very powerful you can create table relationships to give you that parent to child effect okay this is not a caspia thing I want you to know that it's not proprietary to cask you in any way almost any website that you go to uses the ability to pass parameters so because within the database you can grab information and store that information into a different table to create those database relationships and I'm going to give you a basic version of that in today's video so you have some idea and I'll take my time with it so that you guys can grasp the concept and be able to apply that into your own application so let's take a look at the first step I'm back inside my data page wizard and what I want to do is create a link that allows the user to contact the MD so I'm going to edit my report and I'm quickly going to navigate over to the details page this is where I have all my details page fields and if you look at my website when I find a doctor click search and I only have one record in the database but if I go to details now for John Doe this is where I would like to create some kind of a link that allows the user to contact John so then inside my Castillo account I'm going to simply just insert an HTML block here above the photo field and personally I don't like using the HTML editor I like to disable it and now I'm going to show you how you can write a basic hyperlink using HTML so that you can click on that hyperlink to contact the MD and a little bit of syntax is needed here so open bracket a href equals sign and in between the quotes is where you put the destination website and then we'll simply call this contact MD and we're going to close our a tag all right so if you've never designed a hyperlink or if you've never wrote a hyperlink using HTML syntax this is how you do it you can also Google this to search for how do I create a hyperlink using HTML now in my destination page this is where I want to embed my message form and I actually have a page created it's called send a message this is the name of my page ok and I have it called contact - MD this is the name of my URL so I'm just going to copy this and then back inside my Cosby account in between my quotes I'm going to paste that make sure you remove the colon and this is where I want a user to go when they click on this contact MD link let me show you what's happening right now when I click finish so we hit finish refresh my details page and you will see that now contact MD link right above so when I click on that link it's taking me to this page called contact MD but this is where I need to now embed my message form so the users can contact the MD ok but there's one thing that I need to add here I actually need to pass the doctor's ID to that form so that we know who that message belongs to so I'm going to edit my data page of one more time go to my details page and inside this HTML block right after or right before the end of the quotes I'm going to add a question mark which initiates the string and now you have to give your parameter a name you can call it whatever you want my field on the table is called doctor ID I'm just going to abbreviate that as d ID which stands for contact ID that's my parameter name equal sign and then I'm going to insert that field from this drop-down called doctor ID as a string so now every time you click on that link it's going to pass that doctor's ID to that message form and on that message form we're going to stamp the doctor ID in the messages table and this is how you create that connection think of it like pitching and catching or you're going to throw something and you have to receive it and I'll explain that thoroughly once we actually see what this looks like on the web page so let's hit finish one more time and right here on my website you're going to see when I go back to find a doctor hit search and as soon as I go to my details page and I hover over that hyperlink for contact MD you'll see in the bottom left-hand corner what's happening if you look down here in the bottom left-hand corner of my screen you'll see that I'm passing some thing called Eid equals and there is a string of characters after that equal sign this is Jon's ID in the database so if I go to the table of all of my MDS you're going to be able to see that dr. Eide so what I'm doing the whole concept the whole idea here is to grab this ID and stamp this ID inside the messages table so we're going to be able to see that ID populate here in this table and this is how we can create that relationship between these two tables so the doctors know that these are their messages based on that specific ID okay so let's go back to the data pages now that I'm passing my ID when I click on that hyperlink I now need to build a data page that's going to receive that ID and that's going to turn into my messages form so I need to build a submission form based on my messages table and let's give this a name we'll call it submit message we'll use the same style my WordPress style we're going to hit next and now I want to include all of my fields in the form hit next one more time and again we need to now configure each one of our fields for doctor ID okay remember from the details page we click on the hyperlink we pass the doctor ID now we need to receive that doctor ID in this data page and to do that you're going to go to the Advanced tab you're going to receive this value now externally and you're going to call the parameter the same way as you did in the details page which was D ID so the parameter name has to match in both data pages now for right now I'm just going to leave this as a text field I'm going to leave it exposed to make sure that we're receiving that value but normally what you would do is simply just hide that field all right but while you're testing things leave it as a text field to make sure that we receive that value dates 10th date sent can be a timestamp name let's have that be a required field email can be a required field phone the optional and message can be a textarea when you're done click finish and now let's test out the functionality so we're going to simply deploy this data page and embed it into our messages or our message form web page where we call the send message we're going to paste that code hit update and let's test it out notice it says contact ID I'm passing the D ID which is the content that this doctor's ID so as you click on that it takes me to the message and you can see how I'm now receiving that ID in the doctor ID okay so I pass the ID via the URL and I receive that ID inside this field so let's make one submission here so we'll say I'm submitting the message random phone number and the message can be I'm interested in finding out my ideal weight can you help me with this question mark so I'm going to submit my message and take a look now what we have in our database tables so if I open up the MD table you're going to see that ID remember it ends with yk9 okay if I go to the messages table I also have the same ID so all I did was grab that information from the MD table passed it via the URL all right so it's passing it via the URL and we receive that in the submission form and now we stamp that information in a different table and because we have that information in two tables we have now established a relationship between these two tables okay again remember this is not a caspia thing pay attention next time you're browsing the web and if you see an equal sign of the URL that more than likely means they're passing information from one table to another table okay so they're just passing unique values to create relationships in the database all right and now the very last step to complete the entire application what I want to build next is the ability for the MDS to log in and view just their own messages okay based on that dr. Eide so let's go back to Castillo we're going to click on new data page here and this time what I want to build is a report and let's go into tabular format now that you know how to build a report let's speed through this a little bit quicker we're going to hit next we want to build that report based on the messages table because that's where we're pulling the information from from the messages table and let's give this a name we'll call it view my messages make sure you restrict access based on the MD authentication because you have to log in first in order to see your messages that's not going to be public information I'll once again use the same WordPress style you can have a search form if you'd like I'm going to opt out not to have a search form I just want to see my messages and make sure you this is very important here make sure that you enable this check box for record level security in order for this doctor to see their messages you have to use the authentication field doctor ID to verify the doctor and then the matching field in the current data source is also going to be doctor ID and the current data source is our messages table and because we have that doctor ID now inside that table we're going to be able to now set up record level security or RLS on the messages I'm not going to filter based on any information and then in my results page I'm going to include date sent name email phone and message you can enable editing here if you'd like for the MDS to be able to edit their messages this is your call I'm just going to keep all this unchecked maybe allow them to do an inline delete so if they want to delete a message they can do that and let's keep this the way it is and let's go ahead and disable the details page for now and hit finish once you have this fifth data page built you're going to grab the deploy code once more go back to your website where you have your pages here's my my messages web page you're going to click on edit paste the caspia code hit update and now let's take a look at all of the functionality to make sure everything is working properly now let's go ahead and login as John at MD com password is test 1 2 3 and now that I've logged in I can go ahead and retrieve that message and I can see who's contacting me if somebody wants to get a consultation or book an appointment I can also go ahead and delete that message if I want to let's just make sure this is working correctly I just want you to see the workflow so let's go ahead and find another doctor here well we only have one so we'll use John as an example one more time I'll go to details and I'll try to explain this one more time so as soon as I click on this link I'm passing the doctor's ID in the URL and this form is going to receive that ID and now that you know that the field is receiving the ID you can simply just hide that field by going to the data page and we're simply going to just go to that field and instead of leaving as a text field we're going to hide that field hit finish one more time and now in my form when i refresh it you're not going to be able to see that field there's no reason for the user to be able to see that in the form we don't want them to be able to edit that information okay the ID is still being passed it's behind the scenes in the background we're just not able to see it okay and let's go ahead and submit one more message we'll say Sally Smith email Sally at test com random phone number and we'll say for the message please reach out to me regarding my illness hit submit and now we can go to our messages as John and you should be able to now see that second message come in from Sally okay so in about an hour we were able to put together a very very sophisticated application in Castillo and easily just embed that application into our WordPress website again I didn't show you too much on the WordPress site I really wanted to focus on Castillo but hopefully if you have some knowledge of using WordPress now you can actually use Gatsby to build various different types of applications okay caspia makes it really easy and very user friendly to get started and also to build some very nice and sophisticated apps I really appreciate you guys taking the time to watch today's video I hope you enjoyed it and please don't forget to subscribe and like the video if you did we are going to be releasing additional videos in the future if you have any requests for videos please go ahead and submit your comments below and we'll give you a timeframe how long it'll take us for - how long it'll take us to produce that video thanks again and have a great day bye bye

Channel: CaspioInc

Views: 179,643

Keywords: Wordpress, wordpress.org, how to make a wordpress website, wordpress website, how to, online database, database application, healthcare app, web based application, how to make a web app, wordpress database, wordpress application, apps for wordpress, wordpress plugin

Id: Pdv4UW2TBMY

Length: 72min 34sec (4354 seconds)

Published: Sat Aug 06 2016