Product Page Inquiry Function

As of January 2021, this is my experience in charge of internal development at my current job.

http://www.krinfra.co.kr/gw/

Requirements:

1. We will develop and use an inquiry function on the item introduction page handled by our company.
2. You must be able to save all of the information below.
   1. Name
   2. Company name
   3. contact
   4. email
3. Deliver the received information to the person in charge via email.

Skills used:

1. ASP-HTML
   1. FORM, etc.
2. JAVASCRIPT
3. DB (Microsoft DB Server Management Service)

process:

1. Check and edit the item page
   1. Check and modify javascript connected to the page
   2. Modify related DB connected to page
2. Confirm receipt of email

Form type:

구매문의

수집 및 이용목적	수집항목	보유/이용 기간
온라인 상담/견적	성명, 회사명, 연락처, 이메일	3년

소비자의 불만 또는 분쟁 처리에 관한 기록(전자상거래 등에서의 소비자보호에 관한 법률)

개인정보 수집 및 이용에 동의합니다(필수)

보내기
문의하기 ASP

">

 < div id =" section-subscribe1 " >
		< div class =" container " >
			< div class =" row " >
				< div class =" title1 col-12 " >
					< h2 > 구매문의  h2 >
				 div >
				< div class =" form col-12 ez-animate " data-animation =" fadeInUp " >
					< FORM method =" POST "  name =" frmMain " >

						< input name =" ProductMajorName " type =" hidden " value =" groupware " >
						< input name =" ProductMajorIdx " type =" hidden " value =" 24 " >

						< input type =" hidden " name =" ProductTypeName " value = " 그룹웨어(상품) " > 
						< input type =" hidden " name =" ncount " value = " 1 " > 
						< input type =" hidden " name =" quantity0 " value = " 1 " > 
						< input type =" hidden " name =" product0 " value = " groupware " > 

						< input type =" text " name =" uname " class =" form-email form-element large " placeholder =" 성명 * " tabindex =" 2 " required ="" >
						< input type =" text " name =" company " class =" form-email form-element large " placeholder =" 회사명 * " tabindex =" 2 " required ="" >
						< input type =" text " name =" hp " class =" form-email form-element large " placeholder =" 연락처 * " tabindex =" 2 " required ="" >		
						< input type =" text " name =" uemail " class =" form-email form-element large " placeholder =" 이메일 * " tabindex =" 2 " required ="" >
											
						< div style =" width:640px;text-align:center;margin:50px auto 20px auto " > 
							< table width =" 100% " border =" 0 " cellpadding =" 0 " cellspacing =" 0 " class =" tb " >
						        < tr >
							        < td width =" 33% " > 수집 및 이용목적  td >
							        < td width =" 33% " > 수집항목  td >
							        < td > 보유/이용 기간  td >
						         tr >
						        < tr >
					        		< td > 온라인 상담/견적  td >
						        	< td > 성명, 회사명, 연락처, 이메일  td >
							        < td > 3년  td >
						         tr >
					         table >
							< div style =" width:100%;padding:10px 0 " > 소비자의 불만 또는 분쟁 처리에 관한 기록(전자상거래 등에서의 소비자보호에 관한 법률)  div >
					        < div style =" width:100%;padding:10px 0 " > < input type =" checkbox " name =" checkbox " > 개인정보 수집 및 이용에 동의합니다(필수)  div >
						 div >
						
							< a href =" javascript:gw_send(document.frmMain); " class =" form-submit button text-uppercase bkg-theme bkg-hover-charcoal color-white color-hover-white text-medium " > 보내기  a > < br >
							< button type =" submit " class =" shadow1 bgscheme " > 문의하기  ASP  button >
					 div >
				 form >  
                 div >
			 div >

• The code above is the FORM part in the .asp file. Because the page used the same ASP platform, it was a bit difficult to create a new function. If even one part that does not match the existing settings is created, problems such as the page not working or infinite loading have occurred.
• Therefore, development was carried out one by one so as not to deviate from the existing settings.

Database

• Regarding the DB, there were three tables where the values ​​processed on the page were connected to each other, so we selected new item values ​​and matched FOREIGN KEY.
• I checked the DB connection information in the Configs file in the DBConn folder and modified and used a different DB than the one I used before.

Check the agreement!

• As shown below, this time, you had to check the consent to receive and process the information. Therefore, we added the checkbox.checked function to the javascript content below, and if consent is not given, the phrase “consent is required” is displayed so that it is not processed.

 function gw_send ( obj ) {

	flag = false ; 

	if ( obj . uname . value == "" ) {
		alert ( "이름을 입력하세요" ) ;
		obj . uname . focus ( ) ;
		return ;
	}
	if ( obj . company . value == "" ) {
		alert ( "회사명을 입력하세요" ) ;
		obj . company . focus ( ) ;
		return ;
	}
	if ( obj . hp . value == "" ) {
		alert ( "연락처를 입력하세요" ) ;
		obj . hp . focus ( ) ;
		return ;
	}
	if ( obj . uemail . value == "" ) {
		alert ( "이메일을 입력하세요" ) ;
		obj . uemail . focus ( ) ;
		return ;
	}
	if ( obj . checkbox . checked == false ) {
		alert ( "이용약관에 동의해주세요" ) ;
		obj . checkbox . focus ( ) ;
		return ;
	}
    //obj.target = "!OK"
	obj . action = "/purchase/purchase_comm_ok.asp" ;
	obj . submit ( ) ;

} 

Email processing

• As above, like the NVIDIA_A100 developed last time, when the processed product name is groupware, the recipient and subject of the order/consultation email were set, and after the email was sent, it was set to return to the /gw address.

test

• If you do not check the agreement, an alert will be provided as shown below and the text “Please agree to the Terms of Use” will be displayed!

• If you fill out the form as shown below, check the consent terms, and then submit the form with ‘Send’...

• We confirmed that the email was successfully processed and received as shown below.

Impressions and Reviews:

• I felt like I had become a little more proficient in how to use existing pages and tune them to new pages and the requirements of those pages. In addition, by accessing the source via FTP, I was able to find out more easily than before what things were processed in each asp file, etc. in the source, and what other files were connected to it, and the syntax and paths for other included files. I felt like I was better at figuring out features than before.
• I was able to learn how to connect to a new DB using the DB management service, and that when doing web development, you should always create a file that records DB connection information.
• I learned that when importing an entire template/platform and adding necessary functions, various errors can occur, and in these cases, I learned that I need to pay more attention and work in detail.