Website Coding Day 6, Engineers Week 2021
Video
Links
Transcript (Unedited)
i have the contact form created and the only way to access it is to click down here at the bottom i also have some links within the pages themselves that will have a link to the contact page so i want to show you how i'm about to do this form now i could put the email form in the markdown file but i don't want to do that because i tried my best to avoid having html in the markdown file i've done this here but when it comes to an entire form that is a lot of content to have in there so what i'm going to do is actually kind of copy some existing code that i already have and so on my website what i did was normally you cannot submit with a static website submit data so uh and that's kind of a bigger problem because there you have to have some kind of server side processor that will have the ability to be able to handle the data that is being passed to it so what i have done was on my website i created a php file and this is it so i'm just going to go ahead and copy it as is and put it in over here so again i talked about in an earlier video about reusing code that you've already written nothing is wrong with that some people frown upon it but i enjoy it because hey it saves me time like literally i am not having to write this over again and uh visual studio code is trying to be intelligent right there with all of that but i have no um no need to try to fill all of that out all right so what i've done is i've actually copied this code and what it does is you're basically checking to see if a value is set and if it is set you're going to take all the content that is in that form and so here we go so it's a post array and you will literally split that array out into the message body of the email and then you will add the date time to that email as well as uh the service type which i'm gonna have to change to customize to this form with the current time and then the headers which is the from address and then i have a helpdesk email which is a variable that is being sourced from the environment variables which i will show you how to do that here shortly i do not put my environment variables in the version controls it's just a file that sits on the server in production and then a different file that sits in development so it's kind of like a i treat it like a configuration file and that way it's not ever committed to the code base that way i'm not sending emails when i'm trying to test my code i'm not sending those emails from my development environment to actual email addresses that would be bad um so by making this environment file uh that works there so basically you got the helpdesk email which i have an email dedicated to a dedicated email address in production for my particular website on this one it will be a email that is dedicated to the organization kind of a generic email and then that email has forwarding built into it so that you send it to one address and then that one address forwards it to i think it's like four or five different of the executive uh officers of the chapter so uh pretty much want to level that setup and if the mail was successful then redirect to what is a submission page if not then you do a unexpected error and fail out and then if somebody tries to come to this page directly then it redirects back to the home page by default that being said all right so i have my submit.php and so what i'm going to do is to add a condition in here that will check to see if we are on the con contact not contract contact page so if page.url is equal to contact i believe that's how that's set up with the there and then i also want to do a else and then so if we're not on the contact page show the page content if we are on the contact page show this particular form that i am about to code out format all right there we go so that being said you want to have you want to have some information in here let's see you want to have the form in here so that uh it shows only on that page okay so do form and we're going to have the method of post and the action will post to the submit php page that we just created and close that form out cool now i recommend having recaptcha on your forms i'm not going to cover how to do that or i may come at a later point and cover how to do that but uh recapture basically you go into google then you do a search for google recaptcha and they give you a key and token and so forth and then you copy the text the copy what they give you to paste it on your page and that verifies it somehow magically hooks i think with the use of shell script i mean cell scripts javascript it will hook into your form and so basically if the recaptcha is not completed then your form is not allowed to be submitted so that's a you know helpful way to prevent from getting spam all right so pretty much i'm going to replicate what is already here on the current form that we use on the website and so go ahead and start out trying to see let me look at the source for this particular page um curious on how this was set up now mind you this is a drupal form and so uh the drupal way of doing things may not be the most efficient way of doing things but it is here nonetheless okay so they have a form id with the method of posts and the form post back to itself and then it looks like each element or each field on the form is contained within a div and they have a label as well as a input for each of those items so that is very doable here so we'll do a label and we'll do a label for and the uh we'll call it uh requester name i try not to use keywords in my labeling or uh attributes if you will of the page so that's where that comes from all right and so we'll call it name and the next one we'll do an input of type text and once you have it with a placeholder it says enter your name there we go and this field is going to be required and i know some people they just like to do the single attribute so they'll type required like that personally i hate this because when you look at it if you're just scanning and looking at the attributes it looks like this particular attribute does not have a value associated so what i usually do is required equals required and i know that's like well but that's that is valid html um believe it or not so when there is a attribute that has that really doesn't have a value usually the attribute is also the same thing as that value so required equals required and um i think there's a yeah mainly so instead of just people just typing two or three letters for the sake of this you should want to try to get them to type their full first and last name in here so i'm gonna set the min link to four and so that way if they try to type it in and it doesn't uh it should not pass for that reason all right so i also want to include the form control on this particular form and the reason being is because the form control provides some css styling that is built into bootstrap and so i want to be able to leverage that i also need to set a name in here and i probably need to wrap this on the well probably wrap itself so set the name to request their name on this and i mean you could just set this name set the label for equal to name and then name equals name but that in my opinion looks rather weird so i tried to avoid those type of setups i know some people they don't mind it nor do they care they're more concerned with if it works it works and i shouldn't be concerned with what it actually says but you really should be concerned with what it actually says all right so the next one is the email field we're going to change this to email address likewise email address and i don't know what i just did there email address the type is email and yes that is a valid type enter your email address that field is required and a main length let's see is really a one two so even if you had a at b dot c a at b dot c so it's at least five characters so we're gonna set that to five that way the forum won't just be submitted um it'll probably be a pain for some people that are just trying to get through this form really quickly but we're really trying to reduce the amount of spam submissions that are being submitted so uh that's how you do that you set them in link all right so phone call is what i'm gonna call this instead of phone number um because some spam box can figure out these things so or uh actually we'll have a little bit of fun here so i'm gonna name this field call tyrone and the label is actually going to be phone number and we're going to call tyrone oh type equals phone i think there's a type uh is there a type of telephone so let's see uh input field types phone number all right so for phone number you have a telephone type and hey well why not just go ahead and copy this piece of snippet here i didn't there we go all right so paste use that pattern and that pattern is a regular expression um depending on where you're at that may or may not work uh so just a placeholder and do it five five five five five five five five all right um we'll set this to required uh and then length is uh let's see that is ten digit phone number with two extra characters so a min length of 12 and close that out in that div so div class form control and we have another which i'll go ahead and copy copy paste say form control and if you come back to here we have subjects i don't really think we i mean short summary may be helpful but i think i'm gonna go ahead and inject my own summary here uh when the form processor so i'm actually going to do this last one as message comment or question not request and we'll do this as message and actually probably want to do this as a i believe that is a text area not a input yes it is all right so we're going to cancel that i mean not cancel comment that for the moment so text area and name is message and let's see what we have so we have 5 rows in 60 columns and the placeholder is messaged with the name and required okay all right so we'll do uh required is equal to required no not requester required there we go all right name rows is five columns we'll stick with uh well we're not gonna specify the columns we'll see how that plays out without that piece of information being present and let's see placeholder uh enter your message text all right so if we come back and refresh the page we do not have the page body and it's probably because of this url all right so there we go all right so we have our page body it looks weird because well it is weird nonetheless all right need to see where things may be going a little funky with this um so we have a div that's inside of a container we have a form and a form has a form control uh maybe that form control is the problem because hey my message message message okay that's there um all right so let's take these divs out matter of fact let me start at the top and work my way back down to see if that will make a difference in the presentation of it okay so that works um and i was going off of what existed previously but you probably should not have dev okay all right so that being said now i need to i'm going to use paragraph tags instead that way i don't have to do line breaks after each one and it should automatically break yes there we go all right so uh that's a closing okay there we go that there that there that there and that there all right safe all right and so now to get our labels above um do line breaks on each one you could put your label on the line by itself to be honest and so instead of this do that and then do that whoops there we go safe now how does that look so that looks pretty well and if i put the class uh form control on here it should do some styling here yeah so it stretches it out the entire width of the screen which is what i want all right so to do the same for the other elements some have to oops copy yeah there we go and go ahead and move this up paste and while we add it remove that other code that is no longer needed so that there right save so now um the next part is to actually i didn't do that for the labels like i should have so we'll come back here and drop that in behind each of the labels and then we'll save and then come back and put the label excuse me the class of form control on each of the labels copy paste put that in there paste do a format right quick because that's a little iffy looking all right and now we have our labels accordingly so if we come back again to our labels i want to make sure that people know that they are required so there's a label attribute called required um or is it is required maybe this is required okay that's not there i may have to come in and define that we also want to do font weight bold on this all right so that is bolded and that's what we want and so come over to the css uh that's bmp css there we go all right and i'm gonna go down here at the bottom and do a dot required and i want to is it after something uh let me see how i did it in here because there is a way that you can have your page excuse me there's a way that you can have the css to add characters to the beginning or the ending of an element and i'm not sure if i i know i've done it on other sites i'm not sure if i've done it on this one yep here we go so label required and literally i can just copy this and paste that in required after and label that required and i want to use the um we'll go with the nesby red on this one since this is a brighter red color so if you come back to the page uh not required the required is a class and that class is on that label it should accept oh it doesn't accept that because i need to minify the file and there we go all right and so my metaphy file is being referenced in my html here so that's why that did not work all right the next thing um these attributes look a little bit small compared to what they probably should be on the page and also kind of look a little bit spaced out in my opinion so let me do this with the line break instead and that's a little bit closer and then i think i'm gonna make this a little bit bigger so we can just take out each of these paragraphs and replace them with line breaks and sometimes you'll have to do i know you're thinking well you just typed that code in now you're taking it back out yes because sometimes when you're designing things you run you know you type it initially and then when you actually look at it once you've implemented your light that doesn't look right it needs to be fixed and so that's essentially what has happened in this case for me is i didn't like the way it looked so i went back and redid it being very proficient with the keyboard and the shortcut short keys or excuse me the short being proficient with these keyboard and the shortcuts on the keyboard for the application that you are using helps i use visual studio code for my personal development but i also use uh visual studio in my day-to-day work and so sometimes that has a tendency because i'll type the wrong shortcut in and get either no action or get an unexpected action and that's always interesting to have to deal with after the fact all right the last thing i need is a input button of type submit with name submit and value of submit that is proper cased and saved and then also need to add the class of vtn and the btn um there's another btn i'm not sure what it is hold on all right so i got to input let's go to the css and look for the dtn classes so we got a btn got a btn footer you got a regular btn for the links all right so whoops and that's associated with that all right so coming back so let's do btn.dark for the moment and see what that looks like so that looks fine um i don't know if it's black or not let me see inspect element and pcn dark is dot black all right so what i think i'm going to do is to go ahead and overwrite so btn do a class btn-dark and um we'll do a background come on color that is black and save and so re uh modify the file that will update the css for it and if we refresh the page and do an inspect element this should have all zeros which it does so that is good to go all right so we'll close out the dev console and come back over here and copy the text off of the uh wait a minute oh i do have text on this page okay so let me do come back to the page because i realize now my if condition is incorrect so i don't need this else here but i do need that page content because the page content and actually in this particular scenario the page content comes above this if condition because i want the form to be at the bottom of the page not at the top all right now we have everything on the compact page correct so we have our introductory set of information along with social media and email at the bottom and just a basic form message comment question now the submit handler is set up it should not do anything well yeah okay should verify that this field is not blank all right so you type that in there it's still blowing red for the uh the phone number which is should because it's not in the expected format all right so if we do submit so at least 12 characters you are using eight so let's see all right okay so we're still complaining that format does not match which is great and this one is already being validated because if we come here should be being validated as an email address if not i need to um i'm not sure if i have a email form so i can come back to my partial i have a contact i don't think i have a contact i do have a request service page that has a form on that emailer placeholder you got emailer men link is equal to five on the form that i use and the placeholder text is there um i don't think i put it placeholder text in here so user add i'm gonna do an sbmp.org to place that and we'll do all right so formats of each of those and we'll change this here to i have a question about svmp and so if i come back to the site and so placeholder text is filled in behind here and if you actually go ahead and click contact again that will clear out the entire form the placeholder text is there if you try to submit it by default obviously it's not going to do anything but that is how that works and then our submit function which will be called by this particular url we'll send it over to our submit page and then we need to have a page that the submit page or the submit script rather redirects to so we're going to call that submission and so name that submission.md and looking at my existing code i think the only thing i have in submission is that that page is not indexed and so if we go back over to the docs folder and mine i actually think i have it submit slash index no that's not it okay so here we go submission and so my submission has a redirect built into it and that is it so let's look at the raw text and literally just copy that and paste that in here title submission successful and it needs to redirect back to the root page i also need a [Music] as you see in the submission page i do not want google to index this nor do i want it to follow the links on this page um it could follow the link because this link actually just goes back to the home page but i don't want it to follow the link and i don't want it to index it so i've added this robot's uh attribute in here and in my base template file i have in the metadata as soon as we can get back up to the top of the screen here i have a robots attribute here that says that if the robot's file if the robot's keyword is in the metadata of that particular page then you follow what's in there otherwise you can do it index and follow for whatever it is so uh no concerns would this be an index and should not be to further make sure that that doesn't happen we can come actually come down here to the robot.txt and come think of it i actually need to move this so we're going to cut that from right there and put that into the docs folder um there we go so we have a robot txt and you can have a disallow attribute here and do a slash submission be that and then um there's also slash submission slash index.html all right and so that way it ensures that no crawler will run across this file and put the submission page as a page on a google search result or go or bing or whatever you use for your primary search engine and then the submission page um this submission script rather it should email out and if you want this you can just copy it out of the repository the link is down in the description below where you can view this repository you will need to define some variables here i have helped this email in here and i think i'm still going to leave it at that and then that will be sourced in a configuration file this path may need to change depending on what it has or where it's located on the server in production i haven't logged into the production server in some time so i will need to figure out where i can stick this outside of the web route so that this can be called as neby so that is essentially how i do forms within a mk docs website so if i come back to the contact us page so as you see we have a full form here and ready to go i know some people they put the submit button as the uh well submit and then there's usually a link that goes to cancel or something of that nature i usually don't do that usually i figure if somebody's going to go to a page and they don't really want to submit it they'll find and go to wherever else they need to go so they may click the contact page again and that will clear that out for them or they'll go up here and hit refresh and which will also clear that out for them too all right that being said move on to the next item and i think i have all of my pages covered so my social medias are working and they are referenced on the contact page phone number is working for the chapter we have our links that point to various aspects of things on nsbe and what i want to do that i'm just now noticing is like i don't have the https on all of the urls that reference some of the other sites so i want to go ahead and put the https in there does it make a difference maybe maybe not but if the https does not work that's not my fault that means the url on the other end is not using https and while it may penalize my site i'd rather redirect users to another https site instead of just the http due to uh demand in the middle of the tax that exists as well as the google you know factoring in https for its own site and for its own purposes so here we have all of these things corrected let's do format on this uh uh actually do a trim on this thing and then do format all right and so i notice it's weird i was doing some of these paragraph tags on one line and some of them not on the other so let's do format again all right so i like to see consistency in my work and because i like to make sure that it is readable a little bit of ocd if you ask uh me in some regards but i do believe that neatness is helpful and a little bit of spacing is useful like as you see i use one space between blocks of code i know some people they'll use four or three or two after that but i just go with one because obviously everything else is bumped up next to each other so i know that's one grouping same thing here with this particular card i know this entire card is grouped together because i have a separator of white space or blank line if you will in between the two all right so contact form is done with the page content showing and just to verify that i haven't broken anything else again go through your site checking looking at the various pages make sure everything is still the same images are not you know sideways or anything of that nature buttons are still appropriately displayed and links are still working and that's not the link that i wanted to click all right program so we come over here look at some of the stuff here at the scholarship and so forth and so um yeah so there's that i may do another role of these blocks here that also highlight the scholarship program that we have some other information maybe about the chapter and maybe another block for membership um so matter of fact i guess we can just go ahead and work on that now and as soon as i can locate the text alright so here we have a container and a row so what i'm going to do is actually just go ahead and copy this entire row from get her here copy enter paste there we go all right and so for this one want to we'll do join nsbe on this one and i know in the other video you probably like from the other video you probably may have remembered if you have watched it it's like did we already do this yes and i went back and changed them because i thought that it would be more appropriate to highlight the involvement of the kids and there as well as some of the other things um first instead of what i originally had which i think the first name was join so we'll put this scholarship and what's the other thing i can highlight uh so i have joined scholarship and let's see programs professional development we got our nesbi jr already highlighted about and i guess we could do meetings as the other thing because we do have meetings every month so we'll do meetings here and i'm actually going to take this and put the meetings up here before programs and cut that programs off there and put it down here at the bottom and save and so yeah all right and so meetings so and i'm [Music] actually okay for the meetings i really can display all of the information here for meetings and it pretty much is that uh tuesdays first of each month all right so if we come over here to got that we got the first three and then we got the um so i'm gonna do like i mentioned earlier uh have a closing tag so end of first row and then come down here to the bottom well end of headings is fine so scholarship programs meetings so in the meetings block we'll put that there save come back to the home page and so we have meetings um clean up this text meetings are held the first tuesday each month at 6 00 p.m central time there we go all right uh and so now i'll come back at some point later and update this join i can go ahead and do the links right now at least so the join will go to the membership page the scholarship will go to the scholarship page and the programs will go to the programs page which is good and then the meetings will also go to the programs page as well and so if we do meetings and scroll down and i actually want to do a uh so we do programs with uh i guess the jump to professional development we'll save that and so if we go here and then back to meetings it should jump down to professional development which it does so that's good all right and um a membership that goes to membership all right cool and the scholarship goes there and so a couple of things i want to get is a sign up mailing list sign up page uh we'll actually get have to get the information or a piece of the information from mailchimp because they provide a like i think a form builder in their site that you can use and that form builder will spit out whatever it spits out and then all you have to do is copy and paste that into the page itself and it should be good to go all right so if i have some additional uh i guess call out actions here i can add that here but um it looks a little bit better now that i have more items here because originally i was just thinking that there was a few items um here and it was not very much white space to be honest and i wanted a little bit more white space taken up or more things that's taken up in the white section of the page so it's good to have a little bit more content here on the home page for that um so if you come back over here uh so your jump down links work as well there like you should if you come over here so this is one of the contact pages links that i was talking about so you click that here and it goes to the contact page and all the contact information is here melon dress phone and so forth all right so scrolling through everything else still looks like it works like it should this image here i'm not sure why this image is still acting the way it's acting but it is active when the way it's acting and so um not really much i can do about that at this time but hopefully i'll get that addressed so these buttons are turning gray when i mouse over not sure if i'm okay with that let's go back over and look at so we have the secondary button class here on those um is that right yeah i got the center secondary button class on here i'm not sure if i want to keep that secondary button class or not i guess it wouldn't hurt that that's there um the worst case scenario again and probably just have to take it back off and change it to something else maybe change it to black so instead of secondary we'll change this to btn dark and if we come back up here which one did i change so the join all right so that turns black and it kind of coordinates with the buttons down here at the bottom so i guess i'll go ahead and do that with the rest so btn dart btn dark dark dark dark dark and dark there we go all right so when you mouse over now they all turn black well i forgot one oops which is fairly easy to do sometimes all right so now that one turns black all right so we are good on each of those and then it's good to see that each of these headings are lined up across even though the items above are not necessarily the same height that these second row of things are aligned because of the fact they are in a row um so going to resize this just to show you the resizing of the items so let's say you're on a phone and you're looking at this this is what it would look like so you have this navigation here and that's not centered but um and that's really not centered so that's something we have to address as well actually none of these photos are centered so uh i had to see how i can address that so that at least the center of the photo is there and it is being resized accordingly because that is not resizing like how i would like it to or it to be the carousel but these the individual heading or subsections down here on the home page they look pretty decent to me as well as the items in the footer they are sorted how i would like them to be with the copyright down at the bottom so if we click the hamburg icon and just go to the other pages and see how they look you want to check to make sure that when you're building a website that you resize it now you can use the dev tools it's the dev tools it does have a mobile setup so if you hit f12 and come over i believe it's over here there you go so and you can change it to the corresponding device that you want to use but my personal preference is just to not do it that way instead i rather take it out of mobile mode and i'd rather just resize the entire screen over here and then you're able to see it how things will look in that resized uh position and so so far everything is looking all right to me and i gotta learn that that the events goes to a different page not here all right so this page is pretty straightforward i'll probably i actually will put a heading or header graphic there just like this has a heading graphic and to complete this section here of the executive board and all the scroll bars and everything else um but what you don't want to have is a website that has a horizontal scroll bar meaning a scroll bar that goes left and right because personally i hate having to scroll left and right even when i write my code i don't have it in a way now because i have it zoomed in it's going to have the scroll bar here when i pull up this uh left sidebar but when i do that it is resized and it doesn't have a horizontal scroll bar and just to make sure my lines don't get too long to prevent that i have this character line set at roughly about i believe 80 uh characters or something like that nature or this it says a hundred and it says 111 so it's probably setting like 110 or something like that nature and that way you get a decent amount of line you know all the way across and uh it works but not so far of a line that it just keeps going and going and going because i know some people they like to write their lines as very long and they end up having to scroll left and right up and down that's very difficult in my opinion to manage it's easier if i can see like for instance this could easily span this text area could obviously run off the edge of the screen if i would have put another attribute in here as you see is right at the edge but i'd rather be able to see this entire thing on a single line i mean excuse me on a single screen versus having it on a single line but that is a prep prince that is usually determined by each developer all right yeah so let's see what page i am missing i have a photos page it'd be kind of ironic to not have a photo on the photos page maybe that's just me so let's fix that right quick so i have some existing photos in here uh let's copy we'll go with this one so we just copy it and on the photos page here we go so using our metadata image url slash images i wish we would have copied that didn't i believe this is this is this one or this one actually i'll yeah so let's copy that all right so that slash jpg and image alt all right and so now if we come back to the photo page yeah there we go and alternate text so we do view image info we got the alternate text it did not say that is it not there that is weird all right new page source if i can do that um i actually do i'm gonna do inspect element and use the inspector to so the alt tag did not show up i wonder why oh cause i mistyped alt and this atl versus alt that's a big difference all right so now there we go so we have our alt text and if we do image info oops image info there we go we have the associated text there all right f12 on that so that's good and i'm gonna have to come back and resize that image anyway because when you do the full size of that image it does blow up to mass proportion um because it's in this original size and so i need to scale it down so that when i run the speed test on this site once it is deployed to us in production environment that i get a good speed test rating a lot of times you will get a bad speed test rating not because of the number of images on the page but because the size of the emerald images like resolution size of the images are way too high like they're in their original format and so you have to scale them down otherwise your speed scores particularly for the mobile devices speed score will be very low or medium to very low desktops are usually more tolerant of that larger file size because they usually have higher connection speeds so usually a 100 megabit or even gigabit internet versus a mobile phone that does not necessarily have that type of connection speed so there's the difference in that regard that will wrap things up for this video going back tomorrow for the last part of the series where i discuss the automated deployment setup as well as do a final review of the website after it has been deployed into production until next time peace out