Webslesson | PHP, MySql, Jquery, AngularJS, Ajax, Codeigniter Tutorial

etwa 500~20000

226

Leere Anstrengung. vergeblich heftig

1

216.239.32.21

(adsbygoogle=window.adsbygoogle||[]).push({google_ad_client:"ca-pub-",enable_pe_level_ads:true});(adsbygoogle=window.adsbygoogle||[]).push({google_ad_client:"ca-pub-",enable_pe_level_ads:true});Webslesson|PHP,MySql,Jquery,AngularJS,Ajax,CodeigniterTutorialWebslesson//s.length&&r("jQuery.fn.attr(props,pass)isdeprecated"),t&&!d.test(g)&&(o?aino:e.isFunction(e.fn[a])))?e(t)[a](i):("type"===a&&i!==n&&l.test(t.nodeName)&&t.parentNode&&r("Can'tchangethe'type'ofaninputorbuttoninIE6/7/8"),!e.attrHooks[c]&&p.test(c)&&(e.attrHooks[c]={get:function(t,r){vara,i=e.prop(t,r);returni===!0||"boolean"!=typeofi&&(a=t.getAttributeNode(r))&&a.nodeValue!==!1?r.toLowerCase():n},set:function(t,n,r){vara;returnn===!1?e.removeAttr(t,r):(a=e.propFix[r]||r,aint&&(t[a]=!0),t.setAttribute(r,r.toLowerCase())),r}},f.test(c)&&r("jQuery.fn.attr('"+c+"')mayusepropertyinsteadofattribute")),s.call(e,t,a,i))},e.attrHooks.value={get:function(e,t){varn=(e.nodeName||"").toLowerCase();return"button"===n?u.apply(this,arguments):("input"!==n&&"option"!==n&&r("jQuery.fn.attr('value')nolongergetsproperties"),tine?e.value:null)},set:function(e,t){vara=(e.nodeName||"").toLowerCase();return"button"===a?c.apply(this,arguments):("input"!==a&&"option"!==a&&r("jQuery.fn.attr('value',val)nolongersetsproperties"),e.value=t,n)}};varg,h,v=e.fn.init,m=e.parseJSON,y=/^([^]*)$/;e.fn.init=function(t,n,a){vari;returnt&&"string"==typeoft&&!e.isPlainObject(n)&&(i=y.exec(e.trim(t)))&&i[0]&&("")!=-1){ s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx=s.join(""); } chop=(chop=1){ imgt=''; summ=summary_img; } varsummary=imgt+''+removeHtmlT(div.innerHTML,summ)+''; div.innerHTML=summary;}//]]>(function(d,s,id){varjs,fjs=d.getElementsByTName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";fjs.parentNode.insertBefore(js,fjs);}(document,'script','facebook-jssdk'));WebslessonPHP,Node.js,React.js,MySql,Jquery,AngularJS,Ajax,Codeigniter,LarelTutorialMenuHomePHPMySqlJQueryAjaxLarelCodeigniterToolsOnlineSlugGeneratorOnlineSourceCodeFormatterHTMLEncoder/DecoderConvertCase&CountCharacterFreePHPProjectDemosAboutUsAboutUsWriteforUsPrivacyPolicyTermsandConditionContactMeSaturday22June2024BuildinganOnlineDoctorAppointmentSystemwithNode.js,Express,andMongoDB Webslesson    03:57    appointmentbookingsystem,doctorappointmentbooking,doctorsappointmentbookingsystem,mernproject,mernstack,mernstackproject,mongodbtutorial,nodejstutorial,nodejs,nodeJSProject    Nocomments   Inthistutorial,wewillwalkyouthroughthedevelopmentofacomprehensiveOnlineDoctorAppointmentSystem.Thissystemisdesignedtosimplifytheprocessofbookingandmaningdoctorappointmentsforbothhealthcareprovidersandpatients.Byleveringmodernwebtechnologiesandarobustbackend,thissystemensuresefficientmanement,secureauthentication,andaseamlessuserexperience.IntroductionWhyBuildanOnlineDoctorAppointmentSystem?Intoday'sfast-pacedworld,maningappointmentsmanuallycanbebothcumbersomeandinefficient.AnOnlineDoctorAppointmentSystemoffersastreamlinedsolution,enablinghealthcareproviderstomanetheirscheduleseffectivelyandallowingpatientstobookappointmentswithease.Thissystemhelpsinreducingno-showrates,improvingpatientsatisfaction,andoptimizingtheutilizationofhealthcareresources.KeyBenefits Efficiency:Automatestheappointmentschedulingprocess,reducingadministrativeoverhead. Accessibility:Patientscanbookappointments24/7fromthecomfortoftheirhomes. BetterResourceManement:Helpshealthcareprovidersmanetheirschedulesandpatientloadeffectively. ReducedWaitingTimes:Allowspatientstoseereal-timeailabilityandchoosesuitableslots,reducingwaitingtimes. EnhancedCommunication:Sendsnotificationsandreminderstopatients,improvingengementandadherence. (adsbygoogle=window.adsbygoogle||[]).push({}); SystemOverviewTheOnlineDoctorAppointmentSystemconsistsofthreemainuserroles:Admin,Doctor,andPatient.Eachrolehasdistinctfunctionalitiestailoredtotheirspecificneeds.AdminSide AdminLoginusingJWTToken:Secureauthentication. ViewAnalyticsData:Dashboardshowingsystemanalytics. ManeDoctorData:Add,edit,enable,disabledoctors. ViewPatientData:Accessandmanepatientdetails. ManeDoctorailability:Add,edit,deletedoctorschedules. ManeAppointments:Viewandupdateappointmentdetails. ProfileManement:Admincanedittheirprofile. Logout:Securelylogoutofthesystem.DoctorSide DoctorLoginusingJWTToken:Secureauthentication. ViewAppointments:Accessappointmentsspecifictothelogged-indoctor. ManeAppointments:Addcommentsandupdateappointmentstatus. ProfileManement:Doctorscanedittheirprofiles. Logout:Securelylogoutofthesystem.PatientSide PatientRegistrationwithEmailVerification:Newpatientscanregisterandverifytheiremail. PatientLoginusingJWTToken:Secureauthentication. ViewDoctorailability:Checkailableslotsfordoctors. BookanAppointment:Scheduleanappointmentwithadoctor. ManeAppointments:View,download,andmanetheirappointments. ProfileManement:Patientscanedittheirprofiles. Logout:Securelylogoutofthesystem.TechnologiesUsedServer-Side Node.js:ApowerfulJaScriptruntimethatenablesserver-sidescripting. Express.js:AflexibleNode.jswebapplicationframeworkforbuildingrobustAPIs. MongoDB:ANoSQLdatabaseknownforitsscalabilityandflexibilityinmaninglargevolumesofdata.Client-Side VanillaJaScript:Usedforclient-sidelogicandinteractivity. jQuery:SimplifiesHTMLdocumenttrersal,eventhandling,andAJAXinteractions. jQueryDataTables:EnhancesHTMLtableswithadvancedinteractioncontrols. Bootstrap5:AresponsiveandmodernCSSframeworkfordesigninguser-friendlyinterfaces. HTML5:Providesthestructuralfoundationofthewebpes.Node.jsLibraries express:ThecorewebapplicationframeworkforhandlingHTTPrequestsandrouting. mongoose:AnODM(ObjectDataModeling)libraryforMongoDBandNode.js. jsonwebtoken:ForcreatingandverifyingJSONWebTokens(JWT)forsecureauthentication. joi:ApowerfulschemadescriptionlangueanddatavalidatorforJaScript. multer:Middlewareforhandlingmultipart/form-data,usefulforfileuploads. bcrypt:Alibrarytohelphashpasswordssecurely. moment-timezone:Formanipulatingandformattingdatesindifferenttimezones. nodemailer:AmoduleforsendingemailsfromNode.jsapplications. puppeteer:ANodelibrarythatprovidesahigh-levelAPItocontrolheadlessChromeorChromium,usefulforgeneratingPDFs. (adsbygoogle=window.adsbygoogle||[]).push({}); ConclusionThistutorialcoveredthedevelopmentofanOnlineDoctorAppointmentSystemusingNode.js,Express,andMongoDB.Weexploreduserauthentication,CRUDoperations,PDFgeneration,emailnotifications,andmore.Byfollowingthesesteps,youcanbuildarobustandscalableappointmentmanementsystemforhealthcareproviders.GetSourceCodeGetSourceCodePasswordDemoofOnlineDoctorAppointmentBookingSystemShareThis:   Facebook Twitter Google+ Stumble DiggReadMoreIntroductiontoCloud-BasedWebScraping Webslesson    01:58    cloud,cloud-based,scraping,web,webscraping    Nocomments   In-housevs.cloud-basedwebscraping,whatwouldyouoptfor?Perhapsin-housescrapingbecauseofthelevelofcontrolyouheoverthescrapingprocess.Moreover,youmightprefertokeeptheentirescrapingprocessin-housetoensurethehighestlevelofprivacyanddatasecurity.Yes,in-housescrapingoffersgreatercontrol,privacy,andsecurity.However,maintainingandscalingin-housewebscrapingislessfeasible.Settingupanin-housescrapingoperationisalsocostly.Andthisiswherecloud-basedwebscrapingcomesintosetheday.Let8217;sexplorehowcloud-basedwebscrapingsolvesthesein-housewebscrapingissues.Thesolutionsalsocountasthereasonstoconsidercloud-basedwebscraping.WhyCloud-BasedWebScraping?1.ScalabilityandefficiencyComparedtoanin-housesetupthat'slimitedtospecifichardwareconfigurations,acloud-basedsetupgivesyouaccesstovaston-demandcomputingpower.Thismeansyoucandownscaleorupscaleasdesired,optimizingcostsandensuringoptimalperformance.Inadditiontothelibertytoscale,youdon8217;thetoworryabouthardwareandsoftwareupgrades.Thecloudprovidereliminatestheneedtoconstantlyinvestininfrastructureupgrades,allowingyoutofocusonmakingpaymentsforthevaluableresourcestoachievescrapingobjectives.2.AccessibilityandcollaborationDoyouheaccesstoastableinternetconnection?Then,youcanaccessyourscrapeddataonanydeviceandfromanywhere.Thiseliminatestheneedforphysicaldatatransfers,empoweringremotecollaborations.Anyteammembercanaccessthescrapingproject,andshareandanalyzethescrapeddatawithouttrelingtoacentralin-houserepository.Donotworry.Mostcloud-basedwebscrapingtoolsofferrobustsecuritymeasurestosafeguardyourdata.3.ReducedmaintenanceandeaseofuseAsmentioned,thecloudprovidermanestheunderlyingwebscrapinginfrastructure.Thisincludessoftwareupdates,serverupkeep,andfine-tuninggeneraloperationstoensurescrapingenginesarerunningsmoothly.Yourtaskistodefineclearscrapinggoals,utilizetheailableresources,andmakegooduseoftheextracteddata.Besidesreducedmaintenance,cloudprovidersfitwebscrapingserviceswithintuitiveinterfacestostreamlinethescrapingprocess.Theygrantyouaccesstopre-builttemplatesandscrapers,aswellasoptionstobuildscraperswithminimaltonocodingexperience,easingthewholewebscrapingprocess.4.oidingIPblocksOneofthemostfrustratingaspectsofwebscrapingisIPblocks,especiallynowthatseveralwebsitesheimplementedanti-scrapingmechanisms.Todealwiththisissue,youmustleaseapoolofIPaddressestoworkwith.Inmostcases,leasingapoolofIPaddressesfromaproxyproviderbecomescostlyovertime,limitingscrapingoperations.Withacloud-basedscrapingsetup,yourarelyworryaboutleasingIPaddresses.MostcloudprovidersheavastpoolofconstantlyrotatingIPaddressestobypassIPblocks.5.Cost-EffectivenessforoccasionaluseCloud-basedwebscrapingsolutionsoperateonapay-as-you-gopricingstructure.So,youonlypayfortheresourcesusedforaspecifiedperiod.Thismodelmakescloud-basedwebscrapingmuchmorecost-effectiveforoccasionaluse.Somecloudprovidersofferfree-tieraccesstoscrapingresources.Thisallowsyoutotrytheirservicesbeforecommitting,significantlyoptimizingcost.Moreover,ifyouwanttorunasmallwebscrapingproject,youcanusethefreetrialbeforescalingtheproject,singyoumore.Overall,cloud-basedscrapingservicescomeindifferentflors,andthespecificwaytheyworkvaries,ultimatelyvaryingthecostsed,too!Herearepopularservicestochoosefrom:PopularCloud-BasedWebScrapingSetupsorServices1.VisualwebscrapingtoolsVisualwebscrapingtoolseliminatethecomplexitiesofwebscraping.Ratherthanwritingcomplexscripts,thecloudproviderallowsyouaccesstoavisualscrapingtool.Thetoolhasanintuitivepoint-and-clickinterface,lettingyousimplynigatethewebsiteyouwanttoscrapeandselecttheelementsyouwanttoextract.Eventhoughvisualwebscrapingtoolsaresuitableforbeginnersandthosewithlimitedcodingexperience,youcanusethemtoaccomplishcomplexscrapingtasks.Hidden,fromyourview,isasetofcomplexscrapingalgorithmsthatautomaticallygeneratethecomplexscrapingscriptsrequiredtonigatethetargetwebsiteandretrievevariousdatapoints.2.WebscrapingAPIsComparedtovisualwebscrapingtools,webscrapingAPIsrequireyoutohetechnicalknow-how.YoushouldbeabletowritescriptsthatcaninteractwiththescrapingAPIsandinstructthemtotakethewheelandhandlethescrapingprocess.ThinkofawebscrapingAPI(ApplicationProgrammingInterface)asaspecialtoolkitfordeveloperstobuildcustomscrapingsolutions.So,youarerequiredtocustomizeittoyourlikingsothatitcandispatchvirtualbrowserstovisitatargetsiteandextractdatabasedonyourinstructions.3.HybridsolutionsIfyouarewell-versedinwritingwebscrapingscriptsbutstilllovethesimplicityofapoint-and-clickinterface,ahybridwebscrapingsolutionisforyou.Hybridsolutionsintegrateauser-friendlyinterfacewithdr-and-dropfunctionality.So,youcanbuildanessentialwebscrapingtoolbyvisuallyselectingthedatayouwanttoextractfromawebpe.And,wheneveryouwanttoextractdatafromacomplex-structuredsiteorrequireadvanceddatamanipulation,youcanswitchtocoding.4.ManedscrapingservicesFromsettinguptomaningthewholewebscrapingprocess,amanedscrapingservicetakescareofeverything.Thisserviceisidealforhigh-volumescrapingneeds.Itremovestheworryofbuildingateamtohandlethescrapingtechnicalintricacieswhileyoureapthebenefitsoftheobtaineddata.Withlittletonotechnicalelementstohandle,yourin-houseteamcanfocusonbuildingthebusiness'scorefunctionalities.Thecloud-basedserviceproviderbecomesyourscrapingpartner,takingcareofthetechnicalpartanddeliveringtherequireddatainausableformat.ClosingWordsWebscrapingpowersleadgeneration,pricemonitoring,marketresearch,academicresearch,andmorebusinesselements.However,theburningquestionis8212;Howshouldyousetupyourwebscrapingoperation?In-houseoronthecloud.Usethisblogpostasaguidetomakingthecorrectdecision.ShareThis:   Facebook Twitter Google+ Stumble DiggReadMoreMonday27May2024PHP8MySQLProjectonOnlineExaminationSystem Webslesson    23:46    Ajax,bootstrap5,exam,examination,examinationsystem,JQuery,mysql,online,onlineexam,onlineexamphpsourcecode,onlineexamsystem,onlinequiz,php8,project,quiz,rank,ranking,system    Nocomments   Theadventofdigitaltechnologieshasrevolutionizedvariousaspectsofeducation,includingexaminationsystems.Traditionalpaper-basedexamsareincreasinglybeingreplacedbyonlineexaminationsystems,whichoffernumerousadvantessuchasefficiency,accuracy,andaccessibility.Inthisarticle,wewillexplorethedevelopmentofanonlineexaminationsystemusingPHP8andMySQL,focusingonthefeaturesforthreetypesofusers:Admin,SubUser,andStudent.GetSourceCodeGetSourceCodePasswordKeyFeaturesoftheOnlineExaminationSystemOuronlineexaminationsystemisdesignedtocatertotheneedsofdifferentuserswithintheeducationalecosystem.Thesystemincludescomprehensivefeaturesforadmins,sub-users(suchasteachersormoderators),andstudents,ensuringaseamlessandefficientexaminationprocess.AdminUserFeaturesTheAdminuserhasthehighestlevelofcontrolwithinthesystem,responsibleformaningclasses,subjects,students,exams,andsub-users.HerearethedetailedfunctionalitiesailabletotheAdmin: ClassManement:Adminscanadd,edit,disable,orenableclassdata,allowingthemtoorganizestudentsintodifferenteducationallevelsorgroups. SubjectManement:Adminscanmanesubjectdata,includingaddingnewsubjects,editingexistingones,andenablingordisablingsubjectsasneeded. SubjectAssignment:Adminscanassignsubjectstospecificclasses,edittheseassignments,anddeleteanyoutdatedorincorrectassignments. StudentManement:Adminscanhandlestudentdatacomprehensivelybyaddingnewstudents,editingdetails,andenablingordisablingstudents'statuses. StuWebslesson | PHP, MySql, Jquery, AngularJS, Ajax, Codeigniter TutorialdentClassAssignment:Adminscanassignstudentstoclasses,edittheseassignments,andcontroltheactivationstatusoftheseassignments. ExamManement:Adminscancreate,edit,anddeleteexamdata,ensuringthattheexaminationschedulesanddetailsareup-to-date. ExamSubjectManement:Adminscanadd,edit,anddeleteexamsubjectdata,allowingforprecisecontroloverwhichsubjectsareincludedineachexam. ExamQuestionManement:Adminscanmaneexamquestions,includingaddingnewquestions,editingexistingones,andremovingoutdatedquestions. SubUserManement:Adminscanmanesub-userdatabyadding,editing,disabling,orenablingsub-useraccounts. (adsbygoogle=window.adsbygoogle||[]).push({}); SubUserFeaturesSub-users,suchasteachersormoderators,heaccesstofunctionalitiesthatallowthemtomaneexamsandrelateddata.Theircapabilitiesinclude: ExamManement:Sub-userscanadd,edit,anddeleteexamdata,assistingintheorganizationandschedulingofexams. ExamSubjectManement:Sub-userscanmanethesubjectsrelatedtoeachexam,ensuringthatallnecessarysubjectsareincluded. ExamQuestionManement:Sub-userscanadd,edit,anddeleteexamquestions,contributingtothecreationofcomprehensivequestionbanks.StudentUserFeaturesStudentsaretheprimaryusersoftheonlineexaminationsystem.Theirexperienceisdesignedtobestraightforwardanduser-friendly,providingthefollowingfeatures: Login:Studentscansecurelylogintothesystemusingtheircredentials. ViewExamDetails:Studentscanviewdetailsofupcomingexams,includingsubjects,schedules,andinstructions. ParticipateinExams:Studentscantakepartinexamsdirectlythroughthesystem,answeringquestionsandsubmittingtheirresponsesonline. ViewExamResults:Aftercompletinganexam,studentscanviewtheirresults,includingscoresandfeedback,ifprovided.DevelopingtheSystemwithPHP8andMySQLPHP8bringsnumerousimprovementsandnewfeaturestothetable,makingitanexcellentchoicefordevelopingrobustwebapplications.CoupledwithMySQL,apowerfulrelationaldatabasemanementsystem,developerscancreateefficientandscalableonlineexaminationsystems.SettingUptheEnvironmentTostart,ensureyouheawebserver(suchasApacheorNginx)andaMySQLserverinstalledonyourdevelopmentmachine.YouwillalsoneedPHP8installed,alongwithnecessaryextensionslikePDOfordatabaseinteractions.DatabaseDesignDesigningthedatabaseisacriticalstep.Thedatabaseshouldincludetablesforusers(admin,sub-users,andstudents),classes,subjects,exams,examsubjects,andquestions.Eachtableshouldbenormalizedtoreduceredundancyandensuredataintegrity.ImplementingtheAdminFeaturesFortheadminfeatures,createCRUD(Create,Read,Update,Delete)operationsforclasses,subjects,students,exams,andsub-users.UsePHPtohandleserver-sidelogicandMySQLtostoreandretrievedata.Implementuserauthenticationandrole-basedaccesscontroltoensureonlyauthorizeduserscanperformcertainactions.DevelopingtheSubUserandStudentInterfacesForsub-users,implementinterfacesthatallowthemtomaneexamsandquestions.Ensuretheyhearestrictedsetofpermissionscomparedtoadmins.Forstudents,developauser-friendlyinterfacewheretheycanlogin,viewexams,participateinthem,andseetheirresults.UseAJAXforsmoothinteractionsandreal-timeupdates.SecurityConsiderationsSecurityisparamountinanonlineexaminationsystem.Implementrobustauthenticationandauthorizationmechanisms,protectainstSQLinjectionbyusingpreparedstatements,andensuredataistransmittedovertopreventeesdropping. (adsbygoogle=window.adsbygoogle||[]).push({}); ConclusionDevelopinganonlineexaminationsystemwithPHP8andMySQLinvolvescarefulplanningandexecution.Byprovidingdistinctfeaturesforadmins,sub-users,andstudents,thesystemensuresasmoothandefficientexaminationprocess.WithPHP8'snewfeaturesandMySQL'sreliability,thissystemcanhandlethedemandsofmoderneducationalinstitutions,offeringascalableandsecuresolutionforonlineexaminations.GetSourceCodeGetSourceCodePasswordShareThis:   Facebook Twitter Google+ Stumble DiggReadMoreSunday5May2024BuildingaReal-TimeChatApplicationProjectinNodeJSwithMongoDB Webslesson    22:32    bcrypt,chatapp,chatapplication,chatapplicationproject,chatapplicationusingnodejs,educational,express,joi,jsonwebtoken,MongoDB,mongoose,multer,nodejs,node.js,nodejs,project,webdevelopment    Nocomments   Intoday'sfast-paceddigitalworld,real-timecommunicationhasbecomeanecessityformanyapplications.Whetherit'scollaboratingwithteammembers,providingcustomersupport,orsimplyconnectingfriendsandfamily,thedemandforreal-timechatapplicationsisever-growing.Inthisarticle,we'lldelveintotheprocessofbuildingareal-timechatapplicationusingNode.jsandMongoDB,twopowerfultechnologiesthatcomplementeachotherseamlessly.DownloadSourceViewDemoWhyNode.jsandMongoDB?Node.jsisapopularruntimeenvironmentforbuildingscalableandefficientserver-sideapplications.Itsevent-drivenarchitectureandnon-blockingI/Omakeitanexcellentchoiceforreal-timeapplicationssuchaschat.MongoDB,ontheotherhand,isaflexibleandscalableNoSQLdatabasethatstoresdatainJSON-likedocuments,makingitwell-suitedforhandlingtheunstructureddatatypicallyfoundinchatapplications. (adsbygoogle=window.adsbygoogle||[]).push({}); FeatureofChatApplication1.UserRegistrationUserregistrationallowsindividualstocreateanaccountonyourchatapplication.Toimplementthisfeature: CreateUserSchema:UseMongoosetodefineaschemaforusers.Includefieldssuchasusername,email,password(hashedusingbcrypt),profilepicture,andanyotherrelevantinformation. RegistrationEndpoint:SetupanendpointinExpresstohandleuserregistrationrequests.ValidateincomingdatausingJoi,hashthepasswordusingbcrypt,andthensetheuserdatatoMongoDBusingMongoose. UserAuthentication:Uponsuccessfulregistration,generateaJWTtokenusingjsonwebtokenandsenditbacktotheclient.Thistokenwillbeusedforsubsequentauthentication.2.UserLoginusingJSONWebTokenUserloginallowsregistereduserstoauthenticatethemselvesandaccessthechatapplication.Here'showtoimplementit: LoginEndpoint:Createanendpointtohandleuserloginrequests.Validatetheuser'scredentials(username/emailandpassword),comparethehashedpasswordwithtWebslesson | PHP, MySql, Jquery, AngularJS, Ajax, Codeigniter Tutorialhestoredhashinthedatabase,andiftheymatch,generateaJWTtokenandsenditbacktotheclient. TokenStore:StoretheJWTtokensecurelyontheclient-side(e.g.,inlocalstoreorcookies)tobesentalongwithsubsequentrequestsforauthentication. MiddlewareforAuthentication:CreateamiddlewarefunctioninExpresstoverifytheJWTtokenonprotectedroutes.Ifthetokenisvalid,allowaccesstotherequestedresource;otherwise,returna401Unauthorizederror.3.EditUserProfileDatawithImeUploadThisfeatureenablesuserstoupdatetheirprofileinformation,includinguploadinganewprofilepicture.Here'showtoimplementit: ProfileUpdateEndpoint:Createanendpointtohandleprofileupdaterequests.Allowuserstoupdatefieldssuchasusername,email,bio,etc.Forprofilepictureupdates,useMultertohandlefileuploadsandsetheimetoadesignatedfolder. LinkProfilePicturetoUser:StorethefilepathorURLoftheuploadedprofilepictureintheuserdocumentinMongoDB. SecureFileUploads:Implementvalidationandsecuritymeasurestopreventunauthorizedfileuploadsandensurethatonlyallowedfiletypesandsizesareaccepted.4.SearchUserThisfeatureallowsuserstosearchforotheruserswithinthechatapplication.Here'showtoimplementit: SearchEndpoint:Createanendpointtohandleusersearchqueries.AcceptsearchparameterssuchasusernameoremailandquerytheuserdatabaseinMongoDBtofindmatchingusers. ReturnSearchResults:Sendthelistofmatchingusersbacktotheclientasaresponse.5.DisplaySearchRequestNotificationWhenauserreceivesasearchrequest,theyshouldbenotified.Here'showtoimplementit: Real-TimeNotifications:UseSocket.iotoemitanotificationeventtotherecipientuserwhentheyreceiveasearchrequest. DisplayNotification:Implementclient-sidelogictodisplaythenotificationtotheuserinreal-time,suchasusingtoastnotificationsorupdatingtheUIdynamically.6.AcceptSearchRequestThisfeatureallowsuserstoacceptincomingsearchrequests.Here'showtoimplementit: AcceptRequestEndpoint:Createanendpointtohandlerequeststoacceptincomingsearchrequests.Updatethestatusofthesearchrequestinthedatabasetoindicateacceptance. Real-TimeUpdates:Emitanotificationeventtothesenderofthesearchrequesttoinformthemthattheirrequesthasbeenaccepted.7.ListAcceptedSearchRequestUserUsersshouldbeabletoseealistofuserswhoheacceptedtheirsearchrequests.Here'showtoimplementit: ListAcceptedRequestsEndpoint:Createanendpointtoretrievealistofuserswhoheacceptedthecurrentuser'ssearchrequests. ReturnAcceptedUsers:Sendthelistofacceptedusersbacktotheclientasaresponse.8.StartChatwithotherUserThisfeatureenablesuserstoinitiateachatwithotherusers.Here'showtoimplementit: ChatInitiationEndpoint:Createanendpointtohandlerequeststostartachatwithanotheruser.Storethechatinformationinthedatabase,includingtheparticipantsandanyinitialmesses. Real-TimeChat:UseSocket.iotoestablishreal-timecommunicationbetweenusersinthechat.Emiteventsforsendingandreceivingmesses,typingindicators,etc.9.DisplayUserOnlineOfflineStatusUsersshouldbeabletoseetheonline/offlinestatusofotherusers.Here'showtoimplementit: Real-TimeStatusUpdates:UseSocket.iotoemiteventsforupdatingtheonline/offlinestatusofusersinreal-time. UpdateUserStatus:Implementlogicontheserver-sidetoupdatetheuser'sstatusinthedatabasebasedontheiractivity(e.g.,loggingin/out).Byimplementingthesefeatures,youcancreateacomprehensiveanduser-friendlychatapplicationthatprovidesaseamlesscommunicationexperienceforyourusers. (adsbygoogle=window.adsbygoogle||[]).push({}); SettingUptheEnvironmentBeforewestartbuildingourchatapplication,let'sensureweheNode.jsandMongoDBinstalledonoursystem.Onceinstalled,wecancreateanewdirectoryforourprojectandinitializeanewNode.jsprojectusingnpm. mkdirnode-chat cdnode-chat Next,let'sinstallthenecessarydependencies:1.Express npminstallexpress ExpressisaminimalandflexibleNode.jswebapplicationframeworkthatprovidesarobustsetoffeaturesforwebandmobileapplications.ItsimplifiestheprocessofbuildingwebserversandhandlingHTTPrequestsbyprovidingasimpleandintuitiveAPI.Inourchatapplication,weuseExpressto: SetupourserveranddefineroutesforhandlingHTTPrequests. ServestaticfilessuchasHTML,CSS,andclient-sideJaScript. Implementmiddlewareforparsingincomingrequestbodiesandhandlingerrors.2.Multer npminstallmulter Multerisamiddlewareforhandlingmultipart/form-data,whichisprimarilyusedforuploadingfiles.Whileourchatapplicationmaynotrequirefileuploads,it'sagoodpracticetoincludeMulterforhandlinganyfutureenhancementsthatmayinvolvefileuploads.3.Mongoose npminstallmongoose MongooseisanelegantMongoDBobjectmodelingtooldesignedtoworkinanasynchronousenvironment.Itprovidesastraightforwardschema-basedsolutiontomodelapplicationdata,validateincomingdata,andperformCRUDoperationsonMongoDBdatabases.Inourchatapplication,Mongoosehelpsus: DefineschemasforourMongoDBdocuments,suchasuserprofilesandchatmesses. CreatemodelsbasedontheseschemastointeractwiththeMongoDBdatabase. Performdatavalidationanddefinerelationshipsbetweendifferenttypesofdata.4.Joi npminstalljoi JoiisapowerfulschemadescriptionlangueanddatavalidatorforJaScript.Itallowsustodefineschemasforthedataourapplicationexpectstoreceive,validateincomingdataainsttheseschemas,andprovidehelpfulerrormessesifvalidationfails.Inourchatapplication,Joicanbeusedto: Validateincomingrequeststoensurethattheycontaintheexpecteddatainthecorrectformat. Sanitizeandcoerceincomingdatatoensureconsistencyandsecurity. Handlevalidationerrorsgracefullyandprovidemeaningfulfeedbacktotheuser.5.Bcrypt npminstallbcrypt Bcryptisawidely-usedlibraryforhashingpasswordsinNode.jsapplications.Itprovidesasecurewaytohashpasswordsbeforestoringtheminthedatabase,makingitdifficultforattackerstoreverse-engineerpasswordseveniftheygainaccesstothedatabase.Inourchatapplication,Bcryptisessentialfor: Hashinguserpasswordsbeforestoringtheminthedatabasetoprotectuseraccountsfromunauthorizedaccess. Comparinghashedpasswordsduringtheauthenticationprocesstoverifytheidentityofusers.6.Jsonwebtoken npminstalljsonwebtoken JsonwebtokenisalibraryforgeneratingandverifyingJSONWebTokens(JWTs)inNode.jsapplications.JWTsareacompactandself-containedwayofrepresentingclaimsbetweenparties,makingthemidealforauthenticationandinformationexchange.Inourchatapplication,Jsonwebtokenisusedfor: GeneratingJWTswhenuserssuccessfullyauthenticatewiththeserver. VerifyingJWTswhenusersmakerequeststoprotectedroutes,ensuringthattheyareauthorizedtoaccesstherequestedresources.Byleveringtheselibrariesinourchatapplication,wecanensurethatourapplicationissecure,efficient,andscalable,whilealsoprovidingaseamlessuserexperience.ConclusionInthisarticle,we'vecoveredtheprocessofbuildingareal-timechatapplicationusingNode.jsandMongoDB.ByleveringthepowerofSocket.ioforreal-timecommunicationandMongoDBfordatastore,we'vecreatedascalableandefficientchatapplicationthatcanhandlealargenumberofuserssimultaneously.Withsomeadditionalfeaturesandenhancements,youcanfurthercustomizeandextendthisapplicationtomeetyourspecificrequirements.Beyonditspracticalapplications,thisNode.jschatapplicationprojectcanserveasavaluableeducationalresourceforstudentsandbyincorporatingthisNode.jschatapplicationprojectintoeducationalcurriculaoraspartofself-directedlearning,studentscangainpracticalexperienceinbuildingreal-worldapplicationswhilereinforcingcoreconceptsinwebdevelopment,softwareengineering,andcomputerscience.Whetherusedasastandaloneprojectoraspartofalargercurriculum,thisprojectoffersavaluableopportunityforhands-onlearningandskilldevelopment.DownloadSourceViewDemoGetPasswordShareThis:   Facebook Twitter Google+ Stumble DiggReadMoreFriday8March2024NodejsDr&DropMultipleFileUploadusingMulter Webslesson    01:18    CSS,dr&amp;drop,dranddrop,dranddropfiles,dranddropmultiplefile,drndrop,express,fileupload,fileuploadinnodejs,files,html,Jascript,multer,multiplefileupload,node.js    Nocomments   Introduction:Intoday'sdigitalworld,fileuploadingisacommonfunctionalityforwebapplications.Node.js,withitsasynchronousandevent-drivenarchitecture,offersanexcellentplatformforhandlingfileuploadsefficiently.Multer,amiddlewareforExpress.js,simplifiestheprocessofhandlingmultipart/form-data,makingitperfectforhandlingmultiplefileuploads.Inthistutorial,wewillexplorehowtoimplementdranddropmultiplefileuploadsusingNode.jsandMulter,ensuringthecontentisoptimizedforsearchengines.TableofContents:SettinguptheProjectEnvironmentInstallingDependenciesConfiguringMulterMiddlewareCreatingtheFrontendInterfaceImplementingDrandDropFunctionalityHandlingFileUploadsontheServerRunApplicationConclusion1.SettinguptheProjectEnvironment:Beforedivingintothecode,let'sensWebslesson | PHP, MySql, Jquery, AngularJS, Ajax, Codeigniter TutorialureweheNode.jsinstalledonoursystem.Ifnot,downloadandinstallitfromtheofficialNode.jswebsite. mkdirdr-drop cddr-drop 2.InstallingDependencies:InitializeanewNode.jsprojectandinstalltherequireddependenciesusingnpm: npminit-y npminstallexpressmulter 3.ConfiguringMulterMiddleware:CreateanExpress.jsserverunderserver.jsandconfigureMultermiddlewaretohandlefileuploads:server.js constexpress=require('express'); constmulter=require('multer'); constpath=require('path'); constapp=express(); constPORT=3000; app.use(express.static(__dirname)); //SetupMulterstore conststore=multer.diskStore({ destination:function(request,file,callback){ callback(null,'uploads/'); }, filename:function(request,file,callback){ callback(null,file.fieldname+'-'+Date.now()+path.extname(file.originalname)); } }); //InitializeMulterupload constupload=multer({store:store}); app.get('/upload',async(request,response)=>{ response.sendFile(__dirname+'/upload.html'); }); app.listen(PORT,()=>{ console.log(`Serverisrunningonport${PORT}`); }); 4.CreatingtheFrontendInterface:DesignasimpleHTMLpewithnameupload.htmlfilewithdranddropfunctionalityforuploadingfiles:upload.html <!doctypehtml> <htmllang="en"> <head> <!--Requiredmetats--> <metacharset="utf-8"> <metaname="viewport"content="width=device-width,initial-scale=1"> <!--BootstrapCSS--> <linkhref="cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"crossorigin="anonymous"> <title>DrandDropFileUpload</title> </head> <body> <divclass="container"> <h1class="text-centermb-5mt-5"><b>DrandDropFileUploadinNode.js</b></h1> <divid="drop_zone"> <p>Dranddropfileshere</p> </div> <br/> <divclass="cardmb-5"> <divclass="card-header"> <divclass="row"> <divclass="colcol-6">UploadedFile</div> <divclass="colcol-6"></div> </div> </div> <divid="uploadedIme"class="card-body"> </div> </div> </div> <scriptsrc="cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"crossorigin="anonymous"></script> </body> </html> <style> #drop_zone{ width:100%; min-height:200px; border:2pxdashed#ccc; border-radius:10px; padding:20px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; flex-direction:column; } #drop_zone.hover{ background-color:#f0f0f0; } </style> 5.ImplementingDrandDropFunctionality:WriteJaScriptcodeinuplode.htmlfiletohandledranddropfunctionality:upload.html <script> vardropZone=document.getElementById('drop_zone'); dropZone.addEventListener('drover',(event)=>{ event.preventDefault(); dropZone.classList.add('hover'); }); dropZone.addEventListener('drlee',(event)=>{ event.preventDefault(); dropZone.classList.remove('hover'); }); dropZone.addEventListener('drop',(event)=>{ event.preventDefault(); dropZone.classList.remove('hover'); varfiles=event.dataTransfer.files; handlesFiles(files); }); functionhandlesFiles(files){ for(varcount=0;count<files.length;count++){ varfile=files[count]; uploadFile(file); } } functionuploadFile(file){ varformData=newFormData(); formData.append('file',file); fetch('/upload',{ method:'POST', body:formData }) .then(response=>response.json()) .then(data=>{ constgallery=document.getElementById('uploadedIme'); lethtml=`<imgsrc="/uploads/${data.filename}"class="img-thumbnail"/>`; gallery.innerHTML=gallery.innerHTML+html; }); } </script> 6.HandlingFileUploadsontheServer:Nowinserver.js,wehetohandlefileuploadsontheserver-sideusingExpress.js:server.js app.post('/upload',upload.single('file'),(request,response)=>{ response.json({filename:request.file.filename}); }); 7.RunApplicationAfterwritingallabovecode,forrunthisnodeapplicationinbrowser,wehetostartnodeserver,sowehegoestoterminalwindow,andtherewehetorunnodeserver.jscommandwhichwillstartnodedevelopmentserver.Andatbrowser,wehetoopenhttplocalhost:3000url,thenitwillopenthisNodeDrandDropapplicationinbrowser.8.Conclusion:Congratulations!You'vesuccessfullyimplementeddranddropmultiplefileuploadsusingNode.jsandMulter.Thistutorialcoveredthesetupoftheprojectenvironment,installationofdependencies,configurationofMultermiddleware,creationofthefrontendinterface,implementationofdranddropfunctionality,handlingfileuploadsontheserver,anddisplayinguploadprogress.CompleteSourceCodeserver.js constexpress=require('express'); constmulter=require('multer'); constpath=require('path'); constapp=express(); constPORT=3000; app.use(express.static(__dirname)); //SetupMulterstore conststore=multer.diskStore({ destination:function(request,file,callback){ callback(null,'uploads/'); }, filename:function(request,file,callback){ callback(null,file.fieldname+'-'+Date.now()+path.extname(file.originalname)); } }); //InitializeMulterupload constupload=multer({store:store}); app.get('/upload',async(request,response)=>{ response.sendFile(__dirname+'/upload.html'); }); app.post('/upload',upload.single('file'),(request,response)=>{ response.json({filename:request.file.filename}); }); app.listen(PORT,()=>{ console.log(`Serverisrunningonport${PORT}`); }); upload.html <!doctypehtml> <htmllang="en"> <head> <!--Requiredmetats--> <metacharset="utf-8"> <metaname="viewport"content="width=device-width,initial-scale=1"> <!--BootstrapCSS--> <linkhref="cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"crossorigin="anonymous"> <title>DrandDropFileUpload</title> </head> <body> <divclass="container"> <h1class="text-centermb-5mt-5"><b>DrandDropFileUploadinNode.js</b></h1> <divid="drop_zone"> <p>Dranddropfileshere</p> </div> <br/> <divclass="cardmb-5"> <divclass="card-header"> <divclass="row"> <divclass="colcol-6">UploadedFile</div> <divclass="colcol-6"></div> </div> </div> <divid="uploadedIme"class="card-body"> </div> </div> </div> <scriptsrc="cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"crossorigin="anonymous"></script> </body> </html> <style> #drop_zone{ width:100%; min-height:200px; border:2pxdashed#ccc; border-radius:10px; padding:20px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; flex-direction:column; } #drop_zone.hover{ background-color:#f0f0f0; } </style> <script> vardropZone=document.getElementById('drop_zone'); dropZone.addEventListener('drover',(event)=>{ event.preventDefault(); dropZone.classList.add('hover'); }); dropZone.addEventListener('drlee',(event)=>{ event.preventDefault(); dropZone.classList.remove('hover'); }); dropZone.addEventListener('drop',(event)=>{ event.preventDefault(); dropZone.classList.remove('hover'); varfiles=event.dataTransfer.files; handlesFiles(files); }); functionhandlesFiles(files){ for(varcount=0;count<files.length;count++){ varfile=files[count]; uploadFile(file); } } functionuploadFile(file){ varformData=newFormData(); formData.append('file',file); fetch('/upload',{ method:'POST', body:formData }) .then(response=>response.json()) .then(data=>{ constgallery=document.getElementById('uploadedIme'); lethtml=`<imgsrc="/uploads/${data.filename}"class="img-thumbnail"/>`; gallery.innerHTML=gallery.innerHTML+html; }); } </script> ShareThis:   Facebook Twitter Google+ Stumble DiggReadMore(adsbygoogle=window.adsbygoogle||[]).push({});WebslessonPopularPostsBootstrap5SelectDropdownwithSearchBoxusingVanillaJaScriptPHPMySQLAjaxLiveDataSearchusingJqueryPHPMySqlSimplePHPMysqlShoppingCartBuildRealtimeChatApplicationinPHPMysqlusingWebSocketLibraryManementSystemProjectinPHPwithSourceCodeHowtoDisplayExcelDatainHTMLTableusingJaScriptReal-timeLarelRatchetWebsocketChatApplicationLarel8Tutorial-JoinMultipleTableusingEloquentModelHowtoCreateReview&RatingPeinPHPwithAjaxLiveChatSysteminPHPusingAjaxJQuerySearchfor:169;Webslesson//0){ jQuery(this).append(""); } }); /*-----------------------------------------------------------------------------------*/ /*OverlayEffectforFeaturedIme /*-----------------------------------------------------------------------------------*/ $(".overlay-img").hover(function(){ $(this).stop().animate({ opacity:.5 },300); }, function(){ $(this).stop().animate({ opacity:0 },300); }); }); })(jQuery);//]]>//(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*newDate();a=s.createElement(o),m=s.getElementsByTName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','/analytics.js','ga');ga('create','UA--1','auto');ga('send','peview');functionsource_code(){alert("Ifyouwanttocompletesourcecodeofthistutorial,pleaseshareyouremailincommentbox.");}functionrequest(id){varemail=prompt("EnterEmailAddressforReceiveSourceCodeonEmail,youwillreceivesourcecodewithin5minutes,andalsocheckSPAMfolderalso");if(!isEmail(email)){alert('PleaseProvideValidEmailAddress');request();}else{fetch(`api.allorigins.win/get?url=${encodeURIComponent('httpdemo.webslesson.info/scm/process.php?id='+id+'&email='+email+'')}`).then(function(response){returnresponse.json();}).then(function(responseData){if(responseData.success){alert(responseData.success);}//location.reload();});}}functionisEmail(email){varregex=/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;returnregex.test(email);}window['__wt']='AOuZoY6771_yRMKVy_BwS6omRRQBR0Zupw:97';_WidgetManer._Init('///rearrange?blogID\x3d103','///','103');_WidgetManer._SetDataContext([{'name':'blog','data':{'blogId':'103','title':'Webslesson','url':'/','canonicalUrl':'/','homepeUrl':'/','searchUrl':'/search','canonicalHomepeUrl':'/','blogspotFiconUrl':'/ficon.ico','bloggerUrl':'','hasCustomDomain':true,'':true,'enabledCommentProfileImes':true,'gPlusViewType':'FILTERED_POSTMOD','adultContent':false,'analyticsAccountNumber':'UA--1','encoding':'UTF-8','locale':'en-GB','localeUnderscoreDelimited':'en_gb','langueDirection':'ltr','isPrivate':false,'isMobile':false,'isMobileRequest':false,'mobileClass':'','isPrivateBlog':false,'isDynamicViewsailable':true,'feedLinks':'\x3clinkrel\x3d\x22alternate\x22type\x3d\x22application/atom+xml\x22title\x3d\x22Webslesson-Atom\x22href\x3d\x22/feeds/posts/default\x22/\x3e\n\x3clinkrel\x3d\x22alternate\x22type\x3d\x22application/rss+xml\x22title\x3d\x22Webslesson-RSS\x22href\x3d\x22/feeds/posts/default?alt\x3drss\x22/\x3e\n\x3clinkrel\x3d\x22service.post\x22type\x3d\x22application/atom+xml\x22title\x3d\x22Webslesson-Atom\x22href\x3d\x22/feeds/103/posts/default\x22/\x3e\n','meT':'\x3clinkrel\x3d\x22me\x22href\x3d\x22/profile/7475\x22/\x3e\n','adsenseClientId':'ca-pub-','adsenseHostId':'ca-host-pub-','adsenseHasAds':true,'adsenseAutoAds':false,'boqCommentIframeForm':true,'loginRedirectParam':'','view':'','dynamicViewsCommentsSrc':'///dynamicviews/4224c15c4e7c9321/js/comments.js','dynamicViewsScriptSrc':'///dynamicviews/2adfc','plusOneApiSrc':'apis.google.com/js/platform.js','disableGComments':true,'interstitialAccepted':false,'sharing':{'platforms':[{'name':'Getlink','key':'link','shareMesse':'Getlink','target':''},{'name':'Facebook','key':'facebook','shareMesse':'SharetoFacebook','target':'facebook'},{'name':'BlogThis!','key':'blogThis','shareMesse':'BlogThis!','target':'blog'},{'name':'Twitter','key':'twitter','shareMesse':'SharetoTwitter','target':'twitter'},{'name':'Pinterest','key':'pinterest','shareMesse':'SharetoPinterest','target':'pinterest'},{'name':'Email','key':'email','shareMesse':'Email','target':'email'}],'disableGooglePlus':true,'googlePlusShareButtonWidth':0,'googlePlusBootstrap':'\x3cscripttype\x3d\x22text/jascript\x22\x3ewindow.___gcfg\x3d{\x27lang\x27:\x27en_GB\x27};\x3c/script\x3e'},'hasCustomJumpLinkMesse':false,'jumpLinkMesse':'Readmore','peType':'index','peName':'','peTitle':'Webslesson'}},{'name':'features','data':{}},{'name':'messes','data':{'edit':'Edit','linkCopiedToClipboard':'Linkcopiedtoclipboard','ok':'Ok','postLink':'Postlink'}},{'name':'template','data':{'name':'custom','localizedName':'Custom','isResponsive':false,'isAlternateRendering':false,'isCustom':true}},{'name':'view','data':{'classic':{'name':'classic','url':'?view\x3dclassic'},'flipcard':{'name':'flipcard','url':'?view\x3dflipcard'},'mazine':{'name':'mazine','url':'?view\x3dmazine'},'mosaic':{'name':'mosaic','url':'?view\x3dmosaic'},'sidebar':{'name':'sidebar','url':'?view\x3dsidebar'},'snapshot':{'name':'snapshot','url':'?view\x3dsnapshot'},'timeslide':{'name':'timeslide','url':'?view\x3dtimeslide'},'isMobile':false,'title':'Webslesson','description':'PHP,Node.js,React.js,MySql,Jquery,AngularJS,Ajax,Codeigniter,LarelTutorial','url':'/','type':'feed','isSingleItem':false,'isMultipleItems':true,'isError':false,'isPe':false,'isPost':false,'isHomepe':true,'isArchive':false,'isLabelSearch':false}}]);_WidgetManer._RegisterWidget('_HeaderView',new_WidgetInfo('Header1','headersec',document.getElementById('Header1'),{},'displayModeFull'));_WidgetManer._RegisterWidget('_BlogView',new_WidgetInfo('Blog1','mainblogsec',document.getElementById('Blog1'),{'cmtInteractionsEnabled':false,'lightboxEnabled':true,'lightboxModuleUrl':'/static/v1/jsbin/00-lbx__en_gb.js','lightboxCssUrl':'/static/v1/v-css/-lightbox_bundle.css'},'displayModeFull'));_WidgetManer._RegisterWidget('_AdSenseView',new_WidgetInfo('AdSense1','sidebarrightsec',document.getElementById('AdSense1'),{},'displayModeFull'));_WidgetManer._RegisterWidget('_HTMLView',new_WidgetInfo('HTML1','sidebarrightsec',document.getElementById('HTML1'),{},'displayModeFull'));_WidgetManer._RegisterWidget('_PopularPostsView',new_WidgetInfo('PopularPosts1','sidebarrightsec',document.getElementById('PopularPosts1'),{},'displayModeFull'));