Website Technical Manual - greenbay.usc.edu · 4.0 Uploading Web Pages to cPanel ... 2.0 Content and Processes ... generate the website using the Template Monster template.

WebsiteTechnicalManual(TM) Versionno1.1

WebsiteTechnicalManual

DiabetesHealthPlatformTeam#6

JasmineBerry(Client)VeeravNaidu(ProjectManager)

MukaiNong(Architect)StevenSouth(IV&V)

VijayaPrabhakara(QualityFocalPoint)SudeepSureshan(OperationalConceptEngineer)AashihaPriyadarshniLakshmiKumar(Prototyper)VishaliSomaskanthan(RequirementsEngineer)VandySomaskanthan(Implementer/Tester)

SurabhiGoyal(Architect)

29November2017


VersionHistoryDate Author Version Changes made Rationale 11/25/17 Steven South 1.0 Initial Draft Initial Draft 11/28/17 Steven South 1.1 Updated for TRR Transitioning to Client


TableofContents

1.0DirectoryArchitecture......................................................................................................4

2.0ContentandProcesses......................................................................................................52.1IndexPage..................................................................................................................................52.2BlogPages..................................................................................................................................52.3NotCompleted...........................................................................................................................52.4Recommendations......................................................................................................................6

3.0ConfigurationManagementwithBitbucket......................................................................73.1CommonCommands..................................................................................................................8

4.0UploadingWebPagestocPanel........................................................................................9

5.0Auto-GeneratingInformationalPages..............................................................................125.1StepstoConvertPages.............................................................................................................125.2RunningthePerlScript.............................................................................................................15


1.0DirectoryArchitectureTopleveldirectorystructureisasfollows:site(bitbucket)orpublic_html(cPanel)|->audio|->bat|->css|->custom|->fonts|->images|->intense-*|->js|->newsletter|->videoThecontentsunder"site/custom"arewherethemainimageshavebeenstored.Diabeteseducationpages(edu-*.html)areinthetoplevel"site"directory.


2.0ContentandProcessesThissectionwilloutlinethecontentofthewebsiteandtheprocessesusedtoupdateandgeneratethewebsiteusingtheTemplateMonstertemplate.2.1IndexPageTheindexpageisthestartingpointforthewebsite.Theoriginaltemplateindexthatwaschosenforharexi.comissite/index-skin-sunrise.html.Thiswascopiedtosite/index.htmlandmodified.Theportionsthatweremodifiedweretheheadersandfooters,includingthetabswithalllinkstotheinformationalblogpages.Additionally,images,logos,people,andtextcontenthasbeenmodifiedtoalignwiththegoalsofHarexi.2.2BlogPagesTheheadersandfootersfromtheindexpagewereappliedtoallblogpages.Theblogtemplatechosenwassite/blog-default-single.html.Theblogpagesunderwentamulti-stepprocessinwhichthecontentwasconvertedtoHTMLfromtheoriginalgoogledocuments,andthenimplementedintotheformatasdesiredbytheclient.Thereasonforthiswastoreducetheamountofbusyworkforthedevelopers,otherwiseeachblogpagewouldhavetobeimplementedindividuallywhichwouldbeacumbersomeprocess.Thismethodologymaynotworkoncethe"commenting"sectionisliveonthesite.Thiswillrequirefurtherinvestigationfromthefuturedevelopers.Thebasicwaytoaddnewinformationalpagesistocopyoneoftheotherpagesandsimplyreplacethecontentbetweentheheaderandfooters.Allinfopageimagesarelocatedundersite/custom/images/info_pages.TorunthePerlscripttogeneratetheeducationalpages,pleaserefertothesectionAuto-GeneratingInformationalPages.2.3NotCompletedFortheCSCI577AcourseinFall2017,thewebsitewasnottheprimaryfocus,butratherthemobileapp.Forthisreason,thewebsitehasnotbeencompletedforallofthedesiredgoals,althoughisoperationaltotheextentagreeduponbytheclientanddevelopersforthedurationofthecourse.Contentthathasnotbeenimplementedincludes,butnotlimitedtothefollowing:-Commentingonblog/informationalpages-Registering/Loggingintothewebsite-Integrationofthewebsiteandthemobileapp-Linkstothemobileappfromthewebsite(requiresuploadingtheapptotheappstorepriortoputtingalinkin)-Implementingthedesiredcolorschemeontheblog(willrequireaCSSstylesheetupdate)


2.4Recommendations-Iftheheaders&footersareupdated(i.e.,linkstoinformationalcontent,otherpages),itisrecommendedtofirstupdatetheindexpage,thencopyandapplythesameheader&footerchangestotheotherwebpages,suchastheblogstyleinformationalsections.Alternatively,youmaycopytheheader&footersectionsintothePerlscriptthatgeneratestheblogpages.


3.0ConfigurationManagementwithBitbucket BitbucketwasusedtocontroltheconfigurationoffilesfortheWebsite.Thelocationoftherepositoryishttps://bitbucket.org/csci577ateam6/dhp_web.Currently,onlythoseaddedtothegroup“CSCI577ATeam6”undertheowner’spagemayhaveaccesstotherepository.Theclientmaywishtocreatetheirownbitbucket/gitrepositorysothatthisrestrictionisremoved.Thestandardprocessistocheckoutorclonearepository(inthiscase,dhp_web),andmodifyfilesonthedeveloper’ssystem.Oncefilesarereadytobeintegratedintothemaster,thedeveloperwilladdthenewupdatedfiles,committhefiles,andthenpushthefilesontothebitbucketrepo.ThemasterbranchiswhatshouldbeuploadedtocPanel.ThebestwaytomanagethatwouldbetohaveamasterdeveloperpullthelatestchangesandpushneworupdatedfilestotherespectivecPaneldirectoriesasoutlinedin“UploadingWebPagestocPanel”.TheclientmayalsowanttolookintosimplermethodsthatmayintegratecPanelwithbitbucket/gitorotherconfigurationmanagementtools.ThiswouldsimplifyhavingtomanagebothbitbucketandcPanel,andideallyyouwouldonlyneedtocontrolonesource.Itisuptotheclienttolookintothisforfutureiterations.SourcecodedirectoriesonBitbucket:

Thecurrentcheckoutrepositoryislocatedathttps://[email protected]/csci577ateam6/dhp_web.git


3.1CommonCommandsClonetherepotolocaldirectory

CheckStatus(e.g.,ifnewfilesaddedormodified)

Addingafile

Committingthefile

Pushingthefile


4.0UploadingWebPagestocPanelThissectioncoverstheprocesstouploadthewebsiteorpagestocPanelUsethefollowinginformationtologintoHarexi’scPanelpage:cPanelURL:http://harexi.com/cpanelcPanelUsername:harejullcPanelPassword:nuDrpxFpHuSn

Onceloggedin,clickonFiles>FileManager


ClickUpload

Draganddropanyfilesintothispage.Youmayneedtomovethelocationtosub-directoriesifnotinthedesiredlocation.Bydefault,thepageswillbeuploadedintothepublic_htmlfolder.


Youmayalsohavetomodifythepermissionsinorderforeveryoneelsetobeabletoseethewebpage.Dothisbyrightclickingonapage,thenselecting“ChangePermissions”.

Thisbringsupawindowinwhichyouwillselectthedesiredpermissionsforthevariousgroups(User,GroupWorld).Worldmustbeselectedinorderforthepublictobeabletoaccessthispageofthewebsite.


5.0Auto-GeneratingInformationalPagesThissectioncoverstheprocesstouseMicrosoft'sHTMLdocumentconverteralongwiththePerlscripttoconverttheinformationalpagesintothetemplate.PortionsoutlinedinthissectionrequiresthatyouhavePerlinstalled.Perl5.18.2onaMacBookwasusedtorunthescriptsbelowandgeneratethehtmloutputfiles.5.1StepstoConvertPagesStep1.EnsureallinfopagesareinWordDocumentformat(googledocformatwillnotworkforthis).DownloadingtheentirefolderfromGoogleDrivewillgiveyoutheoptionofdownloadingasWorddocuments.Step2.Thisstepisamanualprocess.Openeachdocumentyouwouldliketoconvertandclick"File>SaveAs".


Therewillbeoptionsinthedropdownmenu.Select"WebPage,Filtered(.htm)".Thefilteredoptionwillremoveallofficespecifiedtags.

Click"Yes"tosave.


Youmustdothisforeachdocument,unlessthereisabetterwayofconvertingworddocumentstoHTML.Thereasonthismethodwaschosenwasbecauseitpreserveslocationsofallimagesaswellasallformattingofthewords(e.g.,bold,italics,etc).-Forarticleswithimagesintheworddocument,suchasinthe"DMtype1_Overview(Comprehensive)"document,therewillbeanassociated.flddirectorywhichcontainsallimages.Changethenamesoftheimagesasappropriateandcopytothe"custom/images/info_pages"directory(whereallothersarecurrentlylocated).-Youmustalsomakesuretheylinktotheimageinthenewlocation(i.e.,changethelinkintheinfopagetopointtothecorrectimage).

Output:AllconvertedHTMLfilesfromtheoriginalWorddocuments.Step3.UpdateandrunthePerlScript"parse_diabetes.pl".ThissimplyappliesthedesiredblogtemplatetoeachoftheHTMLfilesgeneratedinStep2.Youmaywanttoupdatealllinksintheindexpagepriortocompletingthisstep.Thereasonbeingtheupdatedlinksshouldbeappliedtoeverypage,includingalloftheseinformationalpagesthatarebeingcreated.See“RunningthePerlScript”sectionbelowformoredetailsonhowtorunthescript.NotethattheHTMLFileswererenamedduetotherequirementofhavingnospacesorspecialcharactersinthefilenamesforHTMLlinks.Eachofthefilesweretakenas-isandthegiventitlesconvertedbasedonthefollowingconvention:-Allspacesarereplacedwithunderscores-Allparentheses(rightorleft)arereplacedbyunderscores-Doubleunderscores(fromabovechanges)replacedbysingleunderscores-Filenamestartswith"edu-"inordertosimplifysearchingfortheminthesitedirectory-AlllettersconvertedtolowercaseExampleofnamechange:

- OriginalFileName:DMtype1Overview(Comprehensive).docx- ConvertedFileName:edu-dm_type_1_overview_comprehensive.html

Step4.CopyallgeneratedHTMLfiles(all"edu-*.html"files)tothetoplevelsitedirectory.Step5.Clickononeofthetablinkstoverifythewebsiteworksproperlyandgoestotheselectedpage.Updatelinksfortheindexpage,ifnecessary,andredoanyoftheabovestepsiflinkschangeoraspagesareadded.


5.2RunningthePerlScript-EnsureyouhavePerlinstalledonyourcomputer.ThisscriptwasrunwithPerlv5.18.2.-Openaterminalwindow

-Changeworkingdirectorytothelocationwhereall.htmlfilesweresavedfromStep2.

-Ifheaders&footerswereupdatedfortheblogtemplate,youmustchangethevariables$TEMPSTARTand$TEMPENDrespectively.Thesecontroltheheaderandfooter.Simplyreplaceeverythinginsidethesetwovariableswithwhatevertheheader&footershouldbe(e.g.,fromtheindex.htmlpage).

-RunthePerlscriptbyenteringperlparse_diabetes.pl.YoumayneedtoaddthepathtothePerlscriptifitslocationisnotincludedinyourrunpath.Orjustputthescriptinthisdirectorytoavoiddealingwithpaths.


Output:AllupdatedHTMLfileswiththeheaders&footersappliedwithanassociated"_files_created.txt"filethatindicatesallfilesthatthisPerlscriptgenerated.

Originalsonleft,updated(output)onrightinthe“_updated”directory

Website Technical Manual - greenbay.usc.edu · 4.0 Uploading Web Pages to cPanel ... 2.0 Content and Processes ... generate the website using the Template Monster template.

Documents