E-Commerce website programming project

[jskhulitz]

Hi,

I'm planning to create a simple E-Commerce website for our (my wife's) "online" shop. Nag-start kasi sya kumuha ng supplier at pino-post ang mga items sa facebook (planning to integrate facebook to the site). So siyempre, kahit sabihing may FB page na yung mga items, hindi pa din ganun ka-organized di katulad kung talagang dedicated site yun para sa selling and advertising ng mga items. About sa mga items, technically parang yung mga usual online shops ngayon (bags, shoes, shorts, shirts, blouses). Wala naman ako plano mag-integrate ng payment gateways dun sa site, pero siyempre may shopping cart function pa din yung site, pero hindi "Payment" ang last step dun sa "purchase" process.

1. Main Item Catalog
2. Select item, a page will show the item details
3. Item Specifics (Size selection, Quantity, etc.)
4. Include item to shopping cart
5. If they want to continue "shopping", back to #1
6. If they are done, proceed to "checkout"
7. Provide delivery option (meetup / delivery)
   • Meetup - select predefined meetup points
   • Delivery - provide exact delivery name and address
8. Provide payment Option
   • COD (Meetup)
   • Bank Deposit (send deposit slip screenshot to FB, website, email)
9. If done, proceed to finish checkout process

Dun sa provided process sa taas, walang payment transactions na manggagaling sa site.

Currently, nagpa-plot na ako ng database structure para sa contents ng site. Medyo magiging mabusisi lang yung mga table relationships since item-oriented and e-commerce site, madaming details ang kailangan. For example, iba ang details ng shoes (shoe sizes, US - 6.5, Euro - 37) compared sa shirts (S, M, L, XL), iba sa men's pants (waist sizes), iba pa sa women's pants (waist and hip sizes), tapos may electronics pa. Siyempre may mga color variants pa ang mga clothing items at spec variants ang mga electronics (powerbanks - 5000mAh, 10000mAh). Magi-include din ako ng pricing discounts, bulk quantity discounts, free delivery promo, and/or vourcher codes.

I won't be using any blogging platforms (wordspress / drupal / joomla). Di rin po ako gagamit ng CMS. Mostly, from scratch ang codes. But I'll try to use CSS frameworks (most probably Bootstrap, pero baka mag-check ako ng iba). I'll be using PHP, MySQL, jQuery (di ko pa alam kung ano anong libraries ang kailanganin ko), AJAX (para sa pag-load ng mga items, pati na din sa iba pang transactions), mapipilitan din ako mag-Photoshop (hindi ako magaling sa designs, so good luck na lang sakin).

I am open to suggestions and comments, para na din mas madaming idea pa ang mapaglaruan ko sa paggawa ko nito. Also, I'll be posting updates para mai-track ko na din ang progress nitong project na ito.

Sa may mga similar projects, pwede kayo sumabay / magtanong. I'll provide suggestions or even help you.

Thanks

2016-09-05 - Start of the Project (Project Planning)
2016-09-06 - Wireframing
2016-09-12 - Setting up the server (local)

Next - Setting up the domain name
Next - Setting up the hosting site
Next - Pointing the domain name to the host

 

[MHJohn]

Not really going to offer you any advice since it seems like you've thought out everything carefully. Just want to wish you a good luck with the project. I'll be watching closely.

May plano ka ba na gawing open source yung project mo para may ibang makapag contribute?

 

[jskhulitz]

As of the moment, hindi ko pa alam kung ano pa ang kailangan ko idagdag dahil sigurado ako na meron ako na-miss out, hindi ko pa malaman kung ano yun, haha. Hindi ko pa kasi mapagtuunan nang maayos at nasa office ako, at magagawa ko lang ito around 9pm pa every night (mga around 2-4 hrs / day), so siguradong mahaba-habang preparasyon pa ang kailangan ko gawin. So mas maganda na yung nakalatag na yung majority ng kailangan ko gawin para meron ako na ako "to-do" list once na maharap ko na ito mamayang gabi.

Actually, pagkabasa ko ng signature mo, may naalala na agad ako na kulang ko. Wala pa ako host at domain. For now kasi, ang plano ko pa ay ilagay na lang muna sya sa free host habang nasa development phase pa. Kapag medyo malinaw na, tsaka ko na lang sya ilalagay sa maayos na host. Any suggested hosting + domain package?

About sa pagse-share / pag-open source nito, hindi ko pa sigurado. Tignan ko pa kapag medyo nagkalinaw na.

Thanks

 

[eugcar]

master slightly medjo hawig sa gawa ko po. www.grandforcemktg.tk bali ang problem ko po dito is yung chat support. ba ka pwede mo po ko matulungan?

 

[jskhulitz]

Current Progress: Layout Designing through wireframing

Wireframe

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.

For the wireframe, I used Balsamiq MockUp

View attachment 285715
Image 1: Site landing page

View attachment 285716
Image 2: Product page

View attachment 285717
Image 3: Log in / Sign up page

 

[MHJohn]

Actually, pagkabasa ko ng signature mo, may naalala na agad ako na kulang ko. Wala pa ako host at domain. For now kasi, ang plano ko pa ay ilagay na lang muna sya sa free host habang nasa development phase pa. Kapag medyo malinaw na, tsaka ko na lang sya ilalagay sa maayos na host. Any suggested hosting + domain package?

For a free host, I always suggest using x10hosting. Iwas ka sa 000webhost (at Hostinger na din) since involved sila sa leak ng usernames and passwords. Hindi encrypted yung data.

Kapag ready ka na mag-upgrade, mukhang perfect naman yung Budget or Pro plans namin sayo since I don't think your website is going to require much resources. Unlimited storage and bandwidth are provided for both with a free domain name as well. Ang difference lang, mas maraming email accounts, mailing lists at MySQL databases ang pwede mong magawa with a Pro account.

I'm always willing to give executive discounts for those who create interesting projects so send me a PM when you decide to host with us.

 

[jskhulitz]

master slightly medjo hawig sa gawa ko po. www.grandforcemktg.tk bali ang problem ko po dito is yung chat support. ba ka pwede mo po ko matulungan?

yan ba yung nago-overlap yung chat message mo sa ibang users?

 

[eugcar]

opo sir. nailoload pa din ung previous chat conv.

tama sir mag x10hosting open yung smtp nya and na ka cpanel x3 madali magfile transfer.

 

[jskhulitz]

actually, ang naka-plan pa lang sakin ay kumuha lang ng kahit anong free hosting muna, tapos kukuha na lang ako ng free domain sa .tk

 

[twiggy]

You are planning a lazada or zalora like website. Nakagawa na ako ng ilang web apps na ganyan para sa mga studyante maganda ang web app na yan madali lang ang system flow. I suggest na gumamit ka na ng php framworks like Laravel para sa mas organize na files and additional web securities.

 

[jskhulitz]

You are planning a lazada or zalora like website. Nakagawa na ako ng ilang web apps na ganyan para sa mga studyante maganda ang web app na yan madali lang ang system flow. I suggest na gumamit ka na ng php framworks like Laravel para sa mas organize na files and additional web securities.

Patterned after lazada / zalora... medyo... ang pinagkaiba lang ay yung hindi (pa) ako maglalagay ng payment gateways sa site. More like kimstore / dbgadgets siguro. Yung tipong viewing / ordering ang gagawin. Yung target audience / market ko kasi ay yung medyo "tipid" dahil sa "mura" lang yung mga items na ibebenta.

As for the php frameworks, currently, wala ako talaga ako php frameworks na ginagamit para sa mga web dev projects ko, so most probably, kapag ngayon ako nag-experiment, mas malamang papalpak / tatagal ang deployment ko. Pero nagbabalak ako gumamit nyan sa mga future experiments.

 

[jskhulitz]

Setting up the server (local)

Para sa web development projects, mas maganda kung ang mga pages natin ay accessible kahit na hindi tayo naka-connect sa internet. Yung makakagawa tayo ng revisions sa isang local (personal) copy nung live (actual) site, na pwede natin magawa yung mga gusto natin changes nang hindi naapektuhan yung actual site. For me, I use WAMP to set up my local host. XAMPP is also a good alternative, I can't personally vouch for it kasi loyal WAMP user ako.


WAMP - Windows (W), Apache (A), MySQL (M), and PHP (P)
XAMPP - Cross-Platform (X), Apache (A), MariaDB (M), PHP (P) and Perl (P)

Kahit alin dito sa dalawang ito, pwede nyo piliin dahil pareho din naman ito gagana sa mga PC ninyo
View attachment 286404
XAMPP (left) and WAMP (right)


What's common between them?

• A - Apache - widely used web server software, kasama ito sa installation on both applications.Gagamitin natin ito para makapag-emulate ng "server" sa local PC natin at magaya natin ang environment ng actual live servers, kailangan natin nito dahil hindi "tatakbo" ang PHP files natin nang wala nito
• M - MySQL / MariaDB - para mai-manager natin ang databases natin
• P - PHP - scripting language for server-side web development

For the steps, WAMP installation ang gagamitin natin

1. Download WAMP installer from their official site (most updated version, mas maganda)
2. I-check mo na lang yung dependencies na kailangan para dun sa version na nai-download mo (ex. vc_redist64x / vc_redist86x)
3. Install the downloaded file. By default, ang installation folder nyan ay nasa "C:/wamp/" pero pwede mo naman palitan depende sa preferred directory mo
4. Wala ka na halos kailangan intindihin sa installation nito, pwede puro next lang ang i-click mo. May options lang na mai-setup mo agad yung default browser (web browser) mo for exeuting the pages, and / or default editing application mo (notepad, notepad++, phpstorm)
5. After the installation, magkakaroon ng "W" / wamp icon sa system tray mo. It should be Green / Orange.
   • Orange = local PC lang ang makaka-access ng nasa local host mo
   • Green = local PC + mga PC na connected sa LAN mo
6. Kapag ok na lahat, pwede ka na maglagay ng sample PHP / HTML file sa wamp directory (default: C:/wamp/www). [COLOR="#99999"]See sample file at the end of this post[/COLOR]
7. Open a browser, type in "localhost/" at makikita mo na dapat yung index file

Sample Code
Save the sample code as index. You may save this file as either index.html or "index.php". Take note of the double quotes (" "), kapag php files ang ise-save nyo, make sure na enclosed sa double quotes yung filename upon saving. Kapag hindi, hindi gagana nang maayos yung php script sa loob nito

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
</head>
<body>
	<h1>Hello World!</h1>
</body>
</html>

 

[jskhulitz]

Making some progress...

View attachment 286934

- - - Updated - - -

Reserved: Setting up free domain name & free hosting site

 

[calbee]

You know what would be a cool feature to include? A recomender system.

More info here, here, and here.

Btw, if you want to secure your e-commerce site using SSL you can now create your own certificate for free.

 

[jskhulitz]

Next - Setting up the domain name
Next - Setting up the hosting site
Next - Pointing the domain name to the host

What is a Domain Name? What is a URL?

Domain Name - the part of a network address that identifies it as belonging to a particular domain
URL (Uniform Resource Locator) - used to specify addresses on the World Wide Web

View attachment 286949

What is a hosting site (web host)?

A web host is a business that provides the technologies and services needed for the website or webpage to be viewed in the Internet


Setting Up the the domain name, web host, and linking them together

For this stage, medyo magiging matrabaho lang dahil madaming registration processes at registration confirmation ang gagawin natin. We have to do this in this order. (I'll just assume na medyo kapos tayo pagdating sa financial resources and/or students pa lang tayo at gusto lang natin ma-practice ang steps sa paggawa ng online website, so puro free services ang gagamitin natin)

1. Primary Email Account - kailangan natin gumawa ng primary email account para makapagregister tayo sa mga free services ng web host at domain registrant. Kung meron ka na email address, pwede mo na i-skip itong part na to (proceed to #2)
   
   1. Register a free email. Marami naman free email accounts, pili ka na lang sa mga medyo popular (Yahoo, GMail)
   2. Take note of the email address and the password (of course). Huwag na muna mag signout sa account dahil kailangan mo pa yan to access the confirmation emails dun sa mga susunod na steps.
2. Register an account (webhost)
   1. Same as the email account, madami din free web hosts. Ayaw ko na isa-isahin kasi masyado hahaba ang content nitong walkthrough na ito. I'll just use Hostinger PH dito sa instructions (may referral code yan, just register under that code kung nakatulong sa inyo ito, thanks)
   2. Same as above, please do take note of the username and password. Malaking abala pa kapag nag-forgot password kayo. Also kung medyo masipag kayo, subukan nyo na din gawin na magkakaiba ang login credentials nyo para sa mga accounts na gagawin nyo para hindi ma-hack sabay sabay ang mga accoutns nyo na pare-pareho ang login information
   3. Nasa upper-right-hand side yung create account link View attachment 286951
   4. Just fill-up the preliminary info na hihingin (i.e. Name, email address, password, do the captcha verification, tick the ToS
   5. May Registered web host account ka na! Pero hindi ka pa tapos jan, once na nasa account dashboard ka na, balik ka dun sa email address na ginawa mo kanina, at i-confirm mo yung account registration mo by clickin on the confirmation link included in the email. Kung wala ka na-receive na email, i-click mo lang yung "Resend confirmation link" sa hostinger account dashboard mo.
   6. I-confirm lang registration process, dahil hindi natin mabubuksan ang Hostinger cPanel hangga't di kumpleto ang verification process.
   7. Once completed, click mo yung "Hosting" menu sa upper-left-hand side ng site, then select "New Account".
   8. Select "Free". Kung may extra pera ka, you may choose the upgraded packages (Premium and Business). Kung wala, tiyaga na lang muna tayo sa Free (2000 MB Disk Space, 100 GB Bandwidth, Free Subdomain, 2 MySQL Databases, 2 E-mails Accounts, Website Builder, Script Autoinstaller, Less Stable Servers, Low Priority Support, No Data Backups)
   9. Sa "Choose a Domain Type", click mo yung toggle para yung word na "Domain" ang nakalabas.
   10. Provide a domain name (example: jskhulitz.tk, please take note of the ".tk" top-level domain, iyan ang gagamitin natin mamaya, siyempre palitan nyo yung "jskhulitz" ng gusto nyong domain name)
   11. Select "Europe [UK]" server. Wala ka choice. Paid servers na yung sa iba continents (Asia, America).
   12. May hihingin uli sayo password, i-paste mo sa notepad yung password
   13. Meron jan "Descriptions" text area, ang nakalagay ay ganito "Describe in 5 words why you have chose to create a free account? It will make your account activation process faster if you do that correctly". Ang ilagay mo na lang ay "I need to practice programming"
   14. Do the captcha again, then press "Order" button.
   15. Upon succcessful registration, dadalhin ka nyan sa Hosting Accounts List. Depende sa volume ng mga registrations, kailangan mo hintayin na maging "Active" ang status nung domain na ni-register mo. Usually instant ang activation, minsan abutin ka ng 5 minutes. Hindi ko lang alam kung may mas matagal pa.
   16. Kapag ok na, click the "+" / expand button, then click "Manage"
   17. Last step, search mo yung Accounts > Details. Diyan mo makikita ang lahat ng details ng account mo, make sure na lahat ng laman nyan ay i-copy & paste mo sa notepad mo.
3. Register another account (domain registrant)
   1. Register a domain under Dot TK. Kayo na ang bahala mag-search ng reason kung bakit free and Dot TK domains. As long as hindi illegal, why not?
   2. Sa register domain tab, itype mo lang ang domain na gusto mo (wag mo na isama yung .tk, kasama na yung sa iccheck nila) then press go.
   3. Kapag available pa yung domain name na gusto mo, dadalhin ka nyan sa next step.
      
   4. Sa "Use your new domain" - select "User DNS", then click mo yung "Your own DNS" tab, then balikan mo yung Nameserver details kanina na nanggaling sa Hosting. Ganito ang itsura nya (NS1.HOSTINGER.PH - 31.170.163.241, NS2.HOSTINGER.PH - 31.220.23.1, i-capitalize mo yung mga nameservers). Idouble check mo na lang kung ano ang nasa Account Details mo, 2 pa lang naman ang kailangan. NOTE: *** Currently, may issue sa step na to, kapag puro "Invalid NameServer" or "Invalid IP Address" ang lumalabas, proceed to the next step and click "Forward this domain to"
      
   5. Kapag hindi gumana yung previous step, click mo ang "Forward this domain to" then ilagay mo lang "http://google.com". Pwede natin palitan yan mamaya. Kailangan lang muna natin iregister yung account natin.
      
   6. Kapag ok na yung previous steps, punta ka sa bottom-most part ng page, then dapat may makikita ka na "Register at Dot TK" title. Unded nyan title na yan, meron checkbox to "Share your new domain!". You may uncheck that box, or kung gusto nyo, eh di sige. Pero ang mas important part jan ay yung link sa pinaka-ibaba (hindi masyado pansinin) na may nakalagay na "Don't have one of these accounts? Use your email address to signup!", click mo lang yan then register that account using your yahoo mail (see step #1).
      
   7. Manghingi uli yan ng Name and Password, just provide the 2 info, then click "Create Account".
   8. Confirm your registration by clicking on the confirmation link on the confirmation email. Possible na hindi mo makita sa Inbox mo yan, so check the Spam / Junk folder. Provide the confimation code, then proceed.
   9. Kapag ok na, ipprompt ka uli nyan to login using the username and password you provided when you registered.
   10. Mapapansin mo na ire-redirect ka nya sa ibang site "https://my.freenom.com/clientarea.php". Don't worry, affiliated sa kanila yan. Kapag nasa freenom ka na, scroll down to the lower-left-hand side then look for "My Domains" link.
   11. Makikita mo na ang "My Domains" list, select the domain you just registered, then click "Manage". Makikita mo na jan ang status nung domain registration mo. Check kung "Active" na.
   12. Click mo yung "Management Tools" > Nameservers. Dito natin aayusin yung naging error sa issue kanina. Select "Use Custom Nameserver", then provide 4 nameservers (check Hostinger Account Details, then put the name servername ALL CAPS, ex.NS1.HOSTINGER.PH, may issue sila sa small letters, haha). Then click "Change Nameservers"
   13. Balik ka uli "Management Tools" > URL Forwarding, burahin mo yung nilagay natin na "http://google.com". Then save changes
   14. NOTE*** Hindi instant ang results sa step na ito, kasi usually ang domain propagation ay tumatagal hanggang 24 hours, pero I'd suggest to check back on your registered domain every 5 minutes.
4. Checking the registered domain
   1. Balik ka uli sa Hostinger cPanel, then search for "File Manager 2", iyan ang gagamitin mo para makapag transfer ng files from your PC to the web host.
   2. Hanapin mo yung "public_html" directory, pasok ka sa directory na yan, then create a new file, save it as index.html, ito ang ilagay mo
      

      		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      		<html lang="en">
      		<head>
      
      		</head>
      		<body>
      		hello world!
      		</body>
      
      		</html>

   3. Save the file.
   4. Open a new browser tab, itype mo yung niregister mo na domain (ie. jannosantiago.tk)
5. Check kung may nai-display na "Hello World"
6. Kapag meron, pa-burger ka naman!
   

 

[peperonity]

Well parang alam mo naman na lahat ang mga susunod mo na gagawin, so why don't use CMS? Ibig sabihin papahirapan mo pa po sarili mo, suggestion lang nman, use WORDPRESS, madali lang naman pagaralan user friendly pa, just install woocommerce plugin and your done..so tatanungin mo ko siguro kung bakit gagamit ka nang CMS, para di kana ma mroblema pa sa future.

Sa hosting nman I suggest use HOSTGATOR OR BLUEHOST kung malaki budget mo, magandang hosting yung dalawang yan, pero kung gusto mong makatipid mag IPAGE ka nalang makakabili ka nang more than 1K jan for 1 year, so ok yung ipage kung kakastart lang yung business mo..sa ipage pala kung new customer ka po may free na domain na kasama pagkaorder mo nang hosting, so Top Level Domain un, .com or .net or .org

just ignore nalang po kung ayaw mo yung mga sinuggest ko, gusto ko lang po makatulong..

 

[jskhulitz]

Actually, the blue print of the program is pretty much all mapped out. Nagsisiguro lang dahil sigurado meron pa ako missing pieces sa plano ko.

About sa CMS (wordpress, joomla, drupal), in a way, kaya hindi ko ginamitan nya ay dahil hindi talaga ako gamay sa paggamit ng kahit alin jan sa mga yan. Pakiramdam ko kapag ginamitan ko nyan, dahil hindi ko pa gamay ang pasikot-sikot nila, parang mas lalo ako magtatagal dahil hindi ko sigurado kung saan ako gagawa ng customization. Madaming kapaan pa ng codes nyan at sa palagay ko, hindi tugma yung mga usual business process dun sa gagamitin namin process para sa shop ni misis, kaya talagang maraming customization pa ang pagdadaanan namin.

Kung may dapat man siguro ako in-implement ay paggamit ng php frameworks (codeigniter, laravel, zend). Sa tingin ko mas mapapadali ang development nito, but then since hindi nga ako gamay sa php frameworks, mas lalo ako magtatagal jan.

About sa host at domain, yep maganda nga yan hostgator at bluehost. About sa budget, kaya din naman siguro. But then, since hindi pa naman full blown business ang ginagawa namin (parang katuwaan pa lang), hindi pa kami naga-allot ng budget para sa paid web marketing. Siguro once na makakita pa kami ng customers (through friends / relatives / fb) baka lumipat na ako sa paid services. Mas madali pa din naman mamili sa mga ecommerce sites kesa sa mga facebook posts.

No worries about sa mga suggestions and opinions. Naghihintay talaga ako ng mga magsa-suggest, pero siyempre, kung mas magtatagal ako sa project ko ngayon, pwede ko gawin yung suggestion nyo, pero sa mga susunod na projects na. Kung medyo madali ang implementation, ilalapat ko din naman agad.

Thanks

 

[regie180]

masarap talaga kapag 100% handmade haha parang tipidpc

pero kung 1 day lang kaya yan cms

 

[MonoKuBobo]

pa subscribe TS.. mamaya ko nlng babasahin lahat na nandito pag uwi ko..

 

[boozter]

Nakakatuwa maka encounter ng project build from ground-up without any framework or ready made CMS. BJ bro!!!
I would suggest to use an automated testing for your project as this type of project is more prone to leaks.