재미를 위해 작업 카운터 웹 만들기

14476 단어 webdev laravel discuss programming

그래서 저는 생산성을 유지하기 위해 저만의 간단한 웹을 만들고 있습니다. 이 웹에서 원하는 활동, 활동 지속 시간 및 성과에 따른 등급을 삽입할 수 있습니다.

활동 페이지에 활동 데이터가 없는 경우입니다.

그래서 Laravel, Bootstrap 및 약간의 CSS를 사용하여 이것을 만들었습니다.

index.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Task Counter</title>
    <style>
        #center {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 5px solid #FFFF00;
            padding: 10px;
        }
    </style>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Task Counter</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="{{ url('/') }}">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url('/activity') }}">Activity</a>
                    </li>

                </ul>
            </div>
        </div>
    </nav>

<div id="center" class="p-3 border m-2 bg-light rounded">
    <form class="m-3" action="{{url('/add_act')}}" method="post" class="col-lg-6 offset-lg-3" enctype="multipart/form-data">
        {{ csrf_field() }}
        <div class="mb-3">
            <label class="form-label">Activity Name</label>
            <input type="text" class="form-control" name="act">
        </div>

        <div class="mb-3">
            <label class="form-label">Time(Minute)</label>
            <input type="text" class="form-control" name="time">
        </div>

        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Rating</label>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="rating" value=1>
                <label class="form-check-label">1</label>
            </div>

            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="rating" value=2>
                <label class="form-check-label">2</label>
            </div>

            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="rating" value=3>
                <label class="form-check-label">3</label>
            </div>

            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="rating" value=4>
                <label class="form-check-label">4</label>
            </div>

            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="rating" value=5>
                <label class="form-check-label">5</label>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>


    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>

활동.블레이드.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Task Counter</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Task Counter</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="{{ url('/') }}">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ url('/activity') }}">Activity</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="flash-message">
    @foreach (['danger', 'warning', 'success', 'info'] as $msg)
        @if(Session::has('alert-' . $msg))
            <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }} <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></p>
        @endif
    @endforeach
</div>

<div class="table-responsive m-3">
    <h1>{{ Session::get('quote') }}</h1>
    <h1>Total Point: {{ Session::get('point') }}</h1>
    <br>
    <table class="table table-bordered table-striped table-hover table-sm bg-light">
        <thead>
        <tr>
            <th scope="col">Activity</th>
            <th scope="col">Time(Minute)</th>
            <th scope="col">Rating</th>
            <th scope="col">Date</th>
        </tr>
        </thead>
        <tbody id="myTable">
        @if($acts->count()>0)
            @foreach($acts as $data)
                <tr>
                    <td>{{ $data->aktivitas }}</td>
                    <td>{{ $data->waktu }}</td>
                    <td>{{ $data->rating }}</td>
                    <td>{{ date('d F Y', strtotime($data->tanggal)) }}</td>
                </tr>
            @endforeach
        @elseif($acts->count()==0)
            <tr>
                <td colspan="7"><h3 class="text-center text-danger">No Activity Data Found</h3></td>
            </tr>
        @endif
        </tbody>
    </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>

ActivityController.php
이 컨트롤러에는 내가 데이터베이스에 추가한 모든 활동 데이터를 표시하는 index()와 활동 데이터를 저장하는 store()의 2가지 기능만 있습니다. 세션을 사용하여 포인트와 견적을 표시했습니다.

<?php

namespace App\Http\Controllers;

use App\Models\Activities;
use DateTime;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class ActivitiesController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        $acts = DB::table('activities')->get();
        $counter = DB::table('activities')
            ->select(DB::raw('SUM(waktu * rating) AS point'))
            ->first();

        if($counter->point<1000){
            $request->session()->put('quote', "You're just started, let's go!");
        }else if($counter->point<2000){
            $request->session()->put('quote', "Not bad, for a newbie!");
        }else if($counter->point<4000){
            $request->session()->put('quote', "Nice, keep it up!");
        }else if($counter->point<8000){
            $request->session()->put('quote', "You're pretty good, don't get cocky though!");
        }else if($counter->point<16000){
            $request->session()->put('quote', "Great job, I respect you!");
        }else if($counter->point<32000){
            $request->session()->put('quote', "Excellent, your highness!");
        }else if($counter->point>=100000){
            $request->session()->put('quote', "You're a God!");
        }

        $request->session()->put('point', $counter->point);
        return view('activities',['acts'=>$acts]);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $dt = new DateTime();
        echo $dt->format('d m Y');

        $activity = new Activities;
        $activity->aktivitas = $request->act;
        $activity->rating = $request->rating;
        $activity->waktu = $request->time;
        $activity->tanggal = $dt;
        $activity->save();

        $request->session()->flash('alert-success', 'You succesfully add the activity!');

        return redirect('/activity');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

각 견적은 수집한 포인트에 따라 달라집니다.

이 인용문은 더 생산적인 사람이 되기 위한 동기 부여를 위한 것입니다.

Task Counter에 대한 아이디어 개발이 있으면 알려주세요.

Reference

이 문제에 관하여(재미를 위해 작업 카운터 웹 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kevincp17/making-task-counter-web-for-fun-2h54

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Automatically Docker Daemon Boot on Windows Subsystem Linux(WSL에서 docker 데몬 자동 시작)

Code Smell 128 - 비영어권 코딩

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다