기록해! 정리해!

HTML --학생 성적처리 ver 11 (폼태그, 자바스크립트,오토셋) 본문

Visual studio (PHP)

HTML --학생 성적처리 ver 11 (폼태그, 자바스크립트,오토셋)

zsuling 2022. 6. 17. 10:59

2018년 대상종목 외부평가 가이드_정보처리기능사_V1 (1).PDF
0.86MB

 

º 순서

html

-> head / body

-> body ( header / nav / section / footer )

-> head (style)

-> style ( header / nav / section / footer )

-> div는 영역으로 묶어주고 싶은 곳 묶어주면 됨 body 부분을 묶어줬음

    헷갈리지않게 div 이름도 id 로 잡아서 <div id="body"> css에서는 #body로 추가

-> section 을 div부분으로 나눠서 편집했다

 

<html>
<head>
<style>
header{
    background-color:blue;  /*바탕 색깔*/
    height:60px;            /*영역의 높이*/
    line-height:60px;       /*한글자의 높이*/
    color:#ffffff;          /*글자색깔*/
    font-size:28px;         /*글자 크기*/
    text-align:center;      /*가운데 정렬*/
}
nav{
    background-color:#6699ff;
    height:25px;
    line-height:25px;
    font-size:12px;
}
section{
    background-color:#cccccc;
    min-height:550px;
}
footer{
    background-color:#3333ff;
    height:30px;
    line-height:30px;
    text-align:center;
    font-size:14px; 
}
#body{
    width:90%;
    margin:auto;
}
</style>        
</head>
<body>
<div id="body">
<header>
 학생 성적처리 프로그램 Ver.1.11   
</header>
<nav>
 &emsp;&emsp;&emsp; 학생등록&emsp; 학생목록/수정&emsp; 홈으로
</nav>
<section>
<br><br>
<div align=center>
 <font size=4> <b> 고등학교 성적처리 프로그램 </b> </font>
</div>
<div> 
    <br>
  &emsp;  1. 학생 성적 정보 테이블을 생성한다. <br>
  &emsp;  2. 학생 성적 테이블에 샘플데이터를 SQL 문을 이용하여 추가한다. <br>
  &emsp;  3. 주어진 화면 디자인을 이용하여 화면을 디자인한다. <br>
  &emsp;  4. 업무 여건에 따라 프로그램을 작성한다. <br>
</div>
</section>
<footer>
HRDKOREA Copyrightⓒ2022 ALL rights resources Development Service of Korea
</footer>
</div>
</body>
</html>

º include로 분리하기

html~nav 까지 top.php  -- <? include "top.php" ?>

footer~html 까지 bottom.php -- <? include "bottom.php" ?>

 

º top.php의 nav에 링크걸기

<nav>
 &emsp;&emsp;&emsp; 
 <a href=form.php>학생등록</a>&emsp;
 <a href=list.php>학생목록/수정</a>&emsp;
 <a href=index.php>홈으로</a>
</nav>

 

º form.php, list.php

 form.php, list.php 새 파일 만들어주고 

 index.php 내용 복사해서 붙히고 원하는 것만 수정한다.

 

 form.php

<div align=center>
 <font size=4> <b> 성적 입력 하기 </b> </font>
</div>

 

list.php

<div align=center>
 <font size=4> <b> 성적 목록 보기 </b> </font>
</div>

 

º  form.php 에 폼태그 추가하기

   <form>
    <table border="1" align=center>
        <tr><td>학번</td><td><input type=text name=sno></td></tr>
        <tr><td>성명</td><td><input type=text name=sname></td></tr>
        <tr><td>국어</td><td><input type=text name=kor></td></tr>
        <tr><td>영어</td><td><input type=text name=eng></td></tr>
        <tr><td>수학</td><td><input type=text name=math></td></tr>
        <tr><td>역사</td><td><input type=text name=hist></td></tr>
        <tr><td colspan="2" align="center"><input type=submit value="성적저장"></td></tr>
    </table>
    </form>

 

º form.php 에 자바스크립트 추가하기

<script>
    function ck1(){
        alert("확인");
    }
    function ck2(){
        alert("Button 확인");
    }
</script>

.

.

.

 <form name=f1 onSubmit="return ck1()">

.

.

<tr><td colspan="2" align="center">
       <input type=submit value="성적저장"> --submit은 1개밖에 만들 수 없다. onSubmit
        <input type=button value="버튼저장"> --여러개 가능
</td></tr>

 

º 버튼에 자바스크립트 호출하기

<input type=button value="버튼저장" onClick="ck2();">

--만들어보고 버튼 지우기

 

º 자바스크립트 추가하기

<script>
    function ck1(){ 
        if(f1.sno.value==""){
        alert("학번을 입력해주세요");
        f1.sno.focus();
        return false;

         }else if(f1.sname.value.length <= 2){
        alert("이름을 3자 이상 입력해주세요");
        f1.sname.value==""
        f1.sname.focus();
        return false;

        }else{
        alert("성적 입력이 완료되었습니다");
       }
    }
</script>

 

º Autoset 연결하기

myadmin 에서 korea 데이터베이스 생성하고

 

Create table examtbl (
 sno varchar(10)  not  null primary key ,
 sname varchar(20),
 kor  int,
 eng  int,
 math int,
 hist int
);

insert into examtbl values('10101','김학생', 75, 85, 90, 60);
insert into examtbl values('10102','이학생', 70, 75, 70, 60);
insert into examtbl values('10103','박학생', 70, 85, 80, 75);
insert into examtbl values('10201','조학생', 90, 85, 100, 50);
insert into examtbl values('10202','황학생', 65, 65, 60, 70);
insert into examtbl values('10203','임학생', 45, 55, 50, 55);
insert into examtbl values('10304','천학생', 70, 75, 85, 80);
insert into examtbl values('10305','남학생', 100, 85, 90, 90);
insert into examtbl values('10306','여학생', 80, 95, 90, 85);
insert into examtbl values('10307','노학생', 35, 55, 70, 55);

select *  from examtbl;

쿼리에 입력하기

 

º form_ok.php 만들기

--Autoset 데이터베이스 연결하기

 

<?
$servername = "localhost";
$username = "root";
$password = "autoset";
$dbname = "korea";

$conn = new mysqli($servername, $username, $password, $dbname);

 

echo "접속완료";
?>

 

* 위에처럼 변수안쓰고 한문장으로 나타낼 수도 있음

$conn = new mysqli("localhost","root","autoset","korea");

 

form.php에  <form name=f1 onSubmit="return ck1()" 

                        method=get --이건 디폴트라 안써도 됨 (method: 값을 넘기는 방식, post를 쓸 수도 있음)

                        action="form_ok.php"> 

해서 연결해주면 접속완료 뜸

 

-- form_ok.php에 쿼리문 연결하기

<?
 $sno = $_GET['sno'];  --form에서 GET을 썼으니 GET으로만 받음 (POST 하면 못받아옴)
 $sname = $_GET['sname']; 
 $kor = $_REQUEST['kor']; --GET, POST 둘 다 받을 수 있음
 $eng = $_GET['eng'];
 $math = $_GET['math'];
 $hist = $_GET['hist'];  --form에 name 이름이랑 같아야함 (대소문자 구분)
 
 $SQL = "insert into examtbl 
               values ('$sno','$sname','$kor','$eng','$math','$hist')";
 echo $SQL; --화면출력 테스트용
 $conn -> query($SQL);
?>

º list.php

 

-- 셀 색깔 나타내기

<? include "top.php" ?>
<style>
#tr1{
    background-color:#aaaaaa;
}
#tr2{
    background-color:#ffffff;
}
    </style>
<section>
<br><br>
<div align=center>
 <font size=4> <b> 성적 목록 보기 </b> </font>
</div>
<div align=center> 
    <br>
    <table border=1>
<tr>
    <th>학번</th> <th>이름</th> <th>국어</th>
    <th>영어</th> <th>수학</th> <th>역사</th>
</tr>
 
<? for ($i=1; $i < 7 ; $i++) { ?> --for 조건문으로 자동으로 셀 갯수늘리기
   <? if ( $i % 2 == 0) {  --짝수 셀
        $bg = 'tr1';
    } else {   --홀수 셀
        $bg = 'tr2';
    }
    ?>
 <tr id=<?=$bg?> > 
    <td>&nbsp;<?=$i?></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<?

   $s = $s + $i;

 } ?>
    </table>

   누적합 : <?=$s ?>
</div>
<br>
</section>
<? include "bottom.php" ?>

º list.php 에 SQL연결하기

form_ok.php위에 있는 DBconn 붙혀주고

<?
$SQL = "select * from examtbl order by sno desc";
$result = $conn -> query($SQL);
?>

 

º 합계, 평균 나타내기

<tr>
    <th>학번</th> <th>이름</th> <th>국어</th>
    <th>영어</th> <th>수학</th> <th>역사</th>
    <th>합계</th> <th>평균</th>
</tr>
 
<?
 $sum=0;
 $avg=0;

 while($row = $result -> fetch_assoc()) {
    $sum= $row['kor']+$row['eng']+$row['math']+$row['hist'];
    $avg= round($sum /4,1);
?>

 <tr>
    <td>&nbsp;<?=$row['sno']?></td>
    <td>&nbsp;<?=$row['sname']?></td>
    <td>&nbsp;<?=$row['kor']?></td>
    <td>&nbsp;<?=$row['eng']?></td>
    <td>&nbsp;<?=$row['math']?></td>
    <td>&nbsp;<?=$row['hist']?></td>
    <td>&nbsp;<?=$sum?></td>
    <td>&nbsp;<?=$avg?></td>
</tr>

 

º 짝수, 홀수 셀 색깔 나누기

 $sum=0; $avg=0; $i=0;

while($row = $result -> fetch_assoc()) {

    $i = $i + 1;
    if($i %2 == 1 ){
        $bg ='tr1';
    } else {
        $bg ='tr2';
    }

    $sum= $row['kor']+$row['eng']+$row['math']+$row['hist'];
    $avg= round($sum /4,1); 
?>
 <tr id=<?=$bg?>>

 

º 순번, 학번을 (학년, 반, 번호)로 나타내기

 <th>순번</th> <th>학년</th> <th>반</th> <th>번호</th>

 

    <td>&nbsp;A<?=$i?></td>
    <td>&nbsp;<?=substr($row['sno'],0,1)?></td>
    <td>&nbsp;<?=substr($row['sno'],1,2)?></td>
    <td>&nbsp;<?=substr($row['sno'],3,2)?></td>

 

º 평점 나타내기

  if ($avg>=90) {
       $grade = "A";
    } else if($avg>=80){
       $grade = "B";
    } else if($avg>=70){
        $grade = "C";
    } else {
        $grade = "F";    
    }
.

.

.

<td>&nbsp;<?=$grade?></td>

º 총점 나타내기

<? 
        $sum = 0;  $avg = 0.0 ;  $i =1 ;
        $skor=0; $seng=0 ; $smath=0; $shist=0;
        $ssum=0 ; $savg=0;
        while( $row = $result -> fetch_assoc()) {
               
        if ($i %2 == 1) {
           $bg = 'tr1' ;  
        } else{
            $bg = 'tr2' ; 
        }

        $sum = $row['kor'] + $row['eng'] + $row['math']+ $row['hist'];
        $avg = round( $sum / 4 , 1) ;  

        $skor = $skor + $row['kor'];
        $seng = $seng + $row['eng'];
        $smath = $smath+ $row['math'];
        $shist = $shist + $row['hist'];
        $ssum = $ssum + $sum;
        $savg = $savg + $avg ;

        if ($avg >= 90){
          $G ='A' ;
        } else if ($avg >= 80) {
          $G ='B' ;
        } else if ($avg >= 70){
          $G ='C' ;
        } else {
          $G ='F' ;
        }

     ?>
     <tr id="<?=$bg?>" >
     <td> &nbsp;A<?=$i?>  </td>
     <td> &nbsp;<?=substr($row['sno'],0,1)?>  </td>
     <td> &nbsp;<?=substr($row['sno'],1,2)?>  </td>
     <td> &nbsp;<?=substr($row['sno'],3,2)?>  </td>
       <td> <?=$row['sname']?> </td>
     <td><?=$row['kor']?> </td> <td><?=$row['eng']?> </td><td> <?=$row['math']?></td>
     <td><?=$row['hist']?> </td>
     <td><?=$sum?> </td>
     <td><?=$avg?> </td>
     <td><?=$G?> </td>
     </tr>

    <? 
       $i = $i + 1 ; 

       }
    ?>

     <tr  >
     <td> &nbsp;  </td>
     <td> &nbsp;  </td>
     <td> &nbsp;  </td>
     <td> &nbsp;  </td>
       <td> 총점 </td>
     <td><?=$skor?> </td>      <td><?=$seng?> </td>
     <td><?=$smath?></td>      <td><?=$shist?> </td>
     <td><?=$ssum?> </td>      <td><?=$savg?> </td>
     <td>&nbsp; </td>
     </tr>

    </table>

 

º 총평균 나타내기

    $askor=0; $aseng=0 ; $asmath=0; $ashist=0;
    $assum=0 ; $asavg=0;

 

        $askor = round($skor / $i ,2);
        $aseng = round($seng / $i ,2);
        $asmath = round($smath / $i ,2);
        $ashist = round($shist / $i ,2); 
        $assum = round($ssum / $i ,2);
        $asavg = round($savg / $i ,2);

 

     <tr>
     <td> &nbsp;  </td>
     <td> &nbsp;  </td>
     <td> &nbsp;  </td>
     <td> &nbsp;  </td>
       <td> 총 평균 </td>
     <td><?=$askor?> </td>      <td><?=$aseng?> </td>
     <td><?=$asmath?></td>      <td><?=$ashist?> </td>
     <td><?=$assum?> </td>      <td><?=$asavg?> </td>
     <td>&nbsp; </td>
     </tr>

º 이름에 링크걸기

edit.php만들고 form.php 복사

 

     <td>
        <a href="edit.php?sno=$row['sno']?>">  -- 이동할 위치?(구분자)sno에 값을받아 넘기는 것
        <?=$row['sname']?> </a> 
     </td>

 

눌렀을 때 주소창에 sno=90001이 떠야함

 

º 학번 값도 넘어가게 만들자 

edit.php에서

<?php
 $sno = $_REQUEST['sno'];
?> 

.

.

 <tr><td>학번</td><td><input type=text name=sno value="<?=$sno?>"></td></tr>

 

º 전부 다 넘어가게 만들자

위에처럼 링크를 하나하나 다 걸수도 있고 SQL을 이용할 수도 있다.

SQL 사용해서 만들어보면

 

edit.php에 DB.conn 을 붙여넣고

 

<?
$servername = "localhost" ;
$username = "root";
$password ="autoset";
$dbname="korea";

$conn = new mysqli($servername, $username, $password, $dbname ); 
?>

<?
 $sno = $_REQUEST['sno'];

   $SQL = "select  *  from examtbl where sno= $sno" ;
   $result = $conn -> query($SQL);
   $row = $result -> fetch_assoc();
   $sno = $row['sno'];
   $sname = $row['sname'];
   $kor = $row['kor'];
   $eng = $row['eng'];
   $math = $row['math'];
   $hist = $row['hist'];
?>

.

.

.

        <tr><td>학번</td><td><input type=text name=sno value="<?=$sno?>"></td></tr>
        <tr><td>성명</td><td><input type=text name=sname value="<?=$sname?>"></td></tr>
        <tr><td>국어</td><td><input type=text name=kor value="<?=$kor?>"></td></tr>
        <tr><td>영어</td><td><input type=text name=eng value="<?=$eng?>"></td></tr>
        <tr><td>수학</td><td><input type=text name=math value="<?=$math?>"></td></tr>
        <tr><td>역사</td><td><input type=text name=hist value="<?=$hist?>"></td></tr>

 

그리고

action="update_ok.php" 로 바꿔준다

 

<font size=4> <b> 성적 수정 하기 </b> </font>

<input type=submit value="성적 수정">

 

º update_ok.php

 

<?
$servername = "localhost";
$username = "root";
$password = "autoset";
$dbname = "korea";

$conn = new mysqli($servername, $username, $password, $dbname);
?>

<?
 $sno = $_GET['sno'];
 $sname = $_GET['sname'];
 $kor = $_GET['kor'];
 $eng = $_GET['eng'];
 $math = $_GET['math'];
 $hist = $_GET['hist'];
 
 $SQL = "update examtbl set sname='$sname', kor='$kor', eng='$eng', math='$math',hist='$hist'";
 $SQL = $SQL . "where sno= '$sno'";        
 echo $SQL;
 $conn -> query($SQL);
?>

<script>
location.href="list.php";
</script>

 

 

 

저작자표시 비영리 변경금지

'Visual studio (PHP)' 카테고리의 다른 글

HTML -- 학생 성적처리 ver 11 코드정리  (0) 2022.06.20
HTML --폼 태그  (0) 2022.06.17
JAVA Script  (0) 2022.06.16
HTML 메모장  (0) 2022.06.16
html 태그  (0) 2022.06.15
'Visual studio (PHP)' Related Articles more
Comments