Website Technical Manual - greenbay.usc.edu · 4.0 Uploading Web Pages to cPanel ... 2.0 Content...
16
Website Technical Manual (TM) Version no 1.1 Website Technical Manual Diabetes Health Platform Team #6 Jasmine Berry (Client) Veerav Naidu (Project Manager) Mukai Nong (Architect) Steven South (IV&V) Vijaya Prabhakara (Quality Focal Point) Sudeep Sureshan (Operational Concept Engineer) Aashiha Priyadarshni Lakshmi Kumar (Prototyper) Vishali Somaskanthan (Requirements Engineer) Vandy Somaskanthan (Implementer / Tester) Surabhi Goyal (Architect) 29 November 2017
Transcript of Website Technical Manual - greenbay.usc.edu · 4.0 Uploading Web Pages to cPanel ... 2.0 Content...
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
WebsiteTechnicalManual(TM) Versionno1.1
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
WebsiteTechnicalManual(TM) Versionno1.1
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
WebsiteTechnicalManual(TM) Versionno1.1
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.
WebsiteTechnicalManual(TM) Versionno1.1
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)
WebsiteTechnicalManual(TM) Versionno1.1
2.4Recommendations-Iftheheaders&footersareupdated(i.e.,linkstoinformationalcontent,otherpages),itisrecommendedtofirstupdatetheindexpage,thencopyandapplythesameheader&footerchangestotheotherwebpages,suchastheblogstyleinformationalsections.Alternatively,youmaycopytheheader&footersectionsintothePerlscriptthatgeneratestheblogpages.
WebsiteTechnicalManual(TM) Versionno1.1
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
WebsiteTechnicalManual(TM) Versionno1.1
3.1CommonCommandsClonetherepotolocaldirectory
CheckStatus(e.g.,ifnewfilesaddedormodified)
Addingafile
Committingthefile
Pushingthefile
WebsiteTechnicalManual(TM) Versionno1.1
4.0UploadingWebPagestocPanelThissectioncoverstheprocesstouploadthewebsiteorpagestocPanelUsethefollowinginformationtologintoHarexi’scPanelpage:cPanelURL:http://harexi.com/cpanelcPanelUsername:harejullcPanelPassword:nuDrpxFpHuSn
Onceloggedin,clickonFiles>FileManager
WebsiteTechnicalManual(TM) Versionno1.1
ClickUpload
Draganddropanyfilesintothispage.Youmayneedtomovethelocationtosub-directoriesifnotinthedesiredlocation.Bydefault,thepageswillbeuploadedintothepublic_htmlfolder.
WebsiteTechnicalManual(TM) Versionno1.1
Youmayalsohavetomodifythepermissionsinorderforeveryoneelsetobeabletoseethewebpage.Dothisbyrightclickingonapage,thenselecting“ChangePermissions”.
Thisbringsupawindowinwhichyouwillselectthedesiredpermissionsforthevariousgroups(User,GroupWorld).Worldmustbeselectedinorderforthepublictobeabletoaccessthispageofthewebsite.
WebsiteTechnicalManual(TM) Versionno1.1
5.0Auto-GeneratingInformationalPagesThissectioncoverstheprocesstouseMicrosoft'sHTMLdocumentconverteralongwiththePerlscripttoconverttheinformationalpagesintothetemplate.PortionsoutlinedinthissectionrequiresthatyouhavePerlinstalled.Perl5.18.2onaMacBookwasusedtorunthescriptsbelowandgeneratethehtmloutputfiles.5.1StepstoConvertPagesStep1.EnsureallinfopagesareinWordDocumentformat(googledocformatwillnotworkforthis).DownloadingtheentirefolderfromGoogleDrivewillgiveyoutheoptionofdownloadingasWorddocuments.Step2.Thisstepisamanualprocess.Openeachdocumentyouwouldliketoconvertandclick"File>SaveAs".
WebsiteTechnicalManual(TM) Versionno1.1
Therewillbeoptionsinthedropdownmenu.Select"WebPage,Filtered(.htm)".Thefilteredoptionwillremoveallofficespecifiedtags.
Click"Yes"tosave.
WebsiteTechnicalManual(TM) Versionno1.1
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.
WebsiteTechnicalManual(TM) Versionno1.1
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.
WebsiteTechnicalManual(TM) Versionno1.1
Output:AllupdatedHTMLfileswiththeheaders&footersappliedwithanassociated"_files_created.txt"filethatindicatesallfilesthatthisPerlscriptgenerated.
Originalsonleft,updated(output)onrightinthe“_updated”directory
